[Bug]: Blocked aria-hidden on an element from ChromeDevTools
Opened this issue · 2 comments
What did you expect? 🧐
When transitioning between pages using SWUP, the transitions should occur smoothly without any accessibility-related console errors.
What actually happened? 😵💫
EDIT: It only happens when I click on the svg logo that gets me back to the homepage..
During almost every page transition, Chrome DevTools reports the following accessibility error:
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: a
Ancestor with aria-hidden: <div id="swup" class="transition-overlap is-previous-container is-removing-container" x-data="main" style="--swup-parallel-container: 1; background-color: black;" aria-hidden="true"><div class="swup-content"><main></main><footer class="inverted" x-data="footer" data-astro-cid-sz7xmlte><div class="container" data-astro-cid-sz7xmlte><div class="upper-wrapper" data-astro-cid-sz7xmlte>…</div><div class="outer-lower-wrapper" data-astro-cid-sz7xmlte>…</div><div class="outer-legals-wrapper" data-astro-cid-sz7xmlte>…</div><div class="logo-wrapper" data-astro-cid-sz7xmlte>…</div></div></footer></div></div>
Swup and plugin versions 📝
"swup": "^4.7.0",
"@swup/a11y-plugin": "^5.0.0",
"@swup/debug-plugin": "^4.1.0",
"@swup/head-plugin": "^2.2.1",
"@swup/parallel-plugin": "^0.4.0",
"@swup/preload-plugin": "^3.2.10",
What browsers are you seeing the problem on? 🧭
Chrome
Relevant log output 🤓
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: a
Ancestor with aria-hidden: <div id="swup" class="transition-overlap is-previous-container is-removing-container" x-data="main" style="--swup-parallel-container: 1; background-color: black;" aria-hidden="true"><div class="swup-content"><main></main><footer class="inverted" x-data="footer" data-astro-cid-sz7xmlte><div class="container" data-astro-cid-sz7xmlte><div class="upper-wrapper" data-astro-cid-sz7xmlte>…</div><div class="outer-lower-wrapper" data-astro-cid-sz7xmlte>…</div><div class="outer-legals-wrapper" data-astro-cid-sz7xmlte>…</div><div class="logo-wrapper" data-astro-cid-sz7xmlte>…</div></div></footer></div></div>
### URL to minimal reproduction 🔗
-
### Checked all these? 📚
- [X] I have read and searched the [official docs](https://swup.js.org)
- [X] I have checked [discussions](https://github.com/orgs/swup/discussions) and [existing issues](https://github.com/issues?q=is:issue+org:swup) for related problems
- [X] I agree to follow this project's [Code of Conduct](https://github.com/swup/.github/blob/master/CODE_OF_CONDUCT.md)
- [X] I have provided all necessary information to the best of my knowledge
Hi! Could you share a url to a minimal reproduction? Much quicker to look into it that way, especially when it seems to be related to which element was clicked exactly and you're using Alpine components as well.
@layout-ch I've transferred this to the correct repo. If you find the time to create a minimal reproduction, let us know — we'd appreciate it as it makes it easier to look into things.