Problem/Motivation

Based on Lighthouse, Siteimprove, Axe accessibility tools and functional testing:

  1. after loading the page, pressing TAB (without clicking anywhere) focuses on the first link in the page (in background, not the popup) and it gets stuck there.
  2. Additionally, if there are no language switcher or other links above the toggles, then the tabbing will get stuck on the "accept all" button as the jQuery selector is not something that could be focused (has no tabindex attribute)
  3. the info in the popup header appears to be with white color on white background due to the use of pseudo element
  4. the aria-checked attribute is not allowed on the label
  5. but since it's there, it should be updated when the states are restored from cookies on load or when toggling via mouse or keyboard
  6. the "ON" label is not showing when the states are restored from cookies on load
  7. toggling the categories with keyboard does not toggle the "ON" label

Proposed resolution

  1. can be solved by focusing the first focusable element inside the modal when it gets opened.
  2. can be fixed by using more generic selectors for the modal and everything else in the background.
  3. get rid of ::after element and put opaque background on banner container itself using rgba().
    rgba() rule seems to be fine for all browsers: https://caniuse.com/?search=rgba
  4. moving it would require a lot of changes
  5. at least make sure it get's updated like the one on the input
  6. apply this simple patch to eu_cookie_compliance module
  7. make sure they are toggled via JS

Remaining tasks

Update patch to cover all issues.

CommentFileSizeAuthor
#2 imporive_accessibility-3180845-2.patch3.92 KBreszli

Comments

reszli created an issue. See original summary.

reszli’s picture

reszli
he/him
Primary language Hungarian
Location Târgu Mureș
commented
StatusFileSize
new imporive_accessibility-3180845-2.patch3.92 KB

attached a patch

reszli’s picture

reszli
he/him
Primary language Hungarian
Location Târgu Mureș
commented
Assigned: reszli » Unassigned
Issue summary: View changes
Status: Active » Needs review
reszli’s picture

reszli
he/him
Primary language Hungarian
Location Târgu Mureș
commented
Issue summary: View changes

further testing with accessibility tools like Lighthouse, Siteimprove and Axe reveald some more issues that should be fixed:

  • the info in the popup header appears to be with white color on white background due to the use of pseudo element
  • the aria-checked attribute is not allowed on the label
  • but since it's there, it should be updated when the states are restored from cookies on load or when toggling via mouse or keyboard
  • the "ON" label is not showing when the states are restored from cookies on load
  • toggling the categories with keyboard does not toggle the "ON" label
rembrandx’s picture

rembrandx commented

I'm adding these changes to the dev branch & adding it to the new alpha release. Since it's already an improvement and the patch is in use in several sites, this counts as a helpful improvement.

Leaving this issue open so the further issues can be tackled in newer patches or merge requests.

  • rembrandx committed d2d6012 on 1.0.x authored by reszli 
    Issue #3180845 by reszli: Improve accessibility of the modal
rembrandx’s picture

rembrandx commented

I'm putting the extra improvements in another ticket instead, to follow up in there:
https://www.drupal.org/project/eu_cookie_compliance_rocketship/issues/3250314

rembrandx’s picture

rembrandx commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rembrandx’s picture

rembrandx commented
Version: 1.0.x-dev » 1.0.0-alpha4