-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessibility issue with custom Navigation buttons #7528
Labels
t0ggles
Linked to the t0ggles task
Comments
I am experiencing the same issue as mentioned here. Our custom button is being used outside of Swiper's Shadow DOM which causes an accessibility issue with the IDREF (ID + Aria-Controls) of the Swiper Wrapper element. Lighthouse also does not seem to like this issue resulting into a subtraction of 5 points within the Accessibility section. |
t0ggles-create swiper |
Task nolimits4web/SWIPER-135 was created |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Check that this is really a bug
Reproduction link
https://codesandbox.io/p/sandbox/swiper-navigation-forked-jzzmnl?file=%2Findex.html%3A9%2C7
Bug description
When registering custom navigation buttons using Parameters as Props, the buttons are rendered outside the Shadow DOM created by
swiper-container
.This is the correct behavior, except these outside buttons now have the
aria-controls
attribute pointing to aswiper-wrapper
element inside the Shadow DOM. This is marked as a Critical accessibility error by tools like Axe or Lighthouse as the Id cannot be queried from outside the Shadow DOM.I'm not sure what the solution is without tearing down the Shadow DOM altogether.
Proposals like AOM's IDREF are promising, but it hasn't been supported by any browsers just yet. Alternatively, I can use Javascript to get rid of the
aria-controls
attributes, but this is just bypassing the WCAG spec.Expected Behavior
No accessibility issues flagged by Accessibility tools.
Actual Behavior
aria-controls
on custom navigation buttons are flagged as invalid.Swiper version
11.1.1
Platform/Target and Browser Versions
MacOS 14.4 Chrome 124.0.6367.119
Validations
Would you like to open a PR for this bug?
The text was updated successfully, but these errors were encountered: