Problem/Motivation

This module uses the attribute "aria-role" in the consent dialog modal if grouping bei purpose is enabled.

Steps to reproduce

Activate klaro and show services by purpose.

Proposed resolution

Use attribute "role" instead.

Screenshot of Google Page Speed

CommentFileSizeAuthor
#4 Screenshot 2024-11-29 at 14-03-41 PageSpeed Insights.png454.28 KBjan kellermann
Screenshot 2024-11-29 at 13-56-10 PageSpeed Insights.png460.88 KBjan kellermann

Issue fork klaro-3490656

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jan kellermann created an issue. See original summary.

deepali sardana’s picture

deepali sardana commented
Assigned: Unassigned »
deepali sardana’s picture

deepali sardana commented
Assigned: » Unassigned
Status: Active » Needs review
StatusFileSize
new Wrong-attribute-aria-role-3490656.patch776 bytes

I have created the patch please review it.

jan kellermann’s picture

jan kellermann commented
Status: Needs review » Needs work
StatusFileSize
new Screenshot 2024-11-29 at 14-03-41 PageSpeed Insights.png454.28 KB

If we change the attrbute to "role", the error "Uses ARIA roles on incompatible elements" occurs.

Maybe the use of the "role"-attribute for the label-element is wrong because the label is via attributes associated to the input-element.

So we have to remove the attributes "role" and "aria-checked"?

Screenshot from PageSpeed

jan kellermann’s picture

jan kellermann commented
Parent issue: » #3484978: [Meta] Improve the accessibility of the Klaro module

jan kellermann credited rkoller.

jan kellermann credited suse says.

jan kellermann’s picture

jan kellermann commented

Todos after discussing in slack #accessibility:

  • Move tabindex from label to input field
  • Move aria-checked from label to input field
  • Remove role from label
rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented

the checkbox doesnt need a tabindex, checkboxes are already included in the tabindex out of the box, same for aria-checked. if you take another look at the video i've shared on slack, there you notice that the checkbox is already tab-able (it is just missing a visible focusoutline) and it is already announced as unchecked. so i think tabindex and aria-checked have simply to be removed from the label instead of moving them over to the input element.

jan kellermann opened merge request !40

jan kellermann credited kulmjens.

jan kellermann’s picture

jan kellermann commented
Status: Needs work » Needs review

Thank @rkoller.

The focus-outline was missing, I added this to CSS.
The tabindex-attribute for input element is needed - else the element-order is wrong.

I opened a MR. Please review.

jan kellermann’s picture

jan kellermann commented
Status: Needs review » Reviewed & tested by the community

Feedback via public Slack Channel.

jan kellermann’s picture

jan kellermann commented
Status: Reviewed & tested by the community » Fixed

Is merged and will be part of next RC.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue tags: +Accessibility, +Drupal CMS a11y
jan kellermann’s picture

jan kellermann commented
Status: Fixed » Closed (fixed)