Error Blocked aria-hidden show up when clicking on Popup Proxy (cover mode)
What happened?
In the Popup Proxy component, if I open the popup in cover mode, the following error appears in the console. However, it looks to work all as expected.
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: div Ancestor with aria-hidden: <div class="q-dialog__backdrop fixed-full" aria-hidden="true" tabindex="-1" style="--q-transition-duration: 300ms;">
What did you expect to happen?
I expect no error message when I call popup.
Reproduction URL
https://quasar.dev/vue-components/popup-proxy/#breakpoint
How to reproduce?
- Go to the Quasar's website https://quasar.dev/vue-components/popup-proxy/#breakpoint on Chrome
- Scroll down to Breakpoint section
- Open the browser's Developer tools
- Click on date picker several times (3 or more)
- You should be able to observe and error in the developer tools.
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Chrome
Quasar info output
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: div
Ancestor with aria-hidden: <div class="q-dialog__backdrop fixed-full" aria-hidden="true" tabindex="-1" style="--q-transition-duration: 300ms;"></div>
Additional context
Sometimes it happens in dialog mode (with breakpoint prop).
Hi @mityaua! 👋
It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.
Without a proper reproduction, your issue will have to get closed.
Thank you for your collaboration. 👏
We have also identified the reported issue.
Reproduction URL: https://codepen.io/Natalie-Demmelmaier/pen/dPyZWbW?editors=1011.
Unfortunately, the problem occurs intermittently. It requires the dialog to be opened and closed multiple times to observe the issue:
I also have this issue.