You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 a swiper-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.
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.
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: