Skip to content

Error Blocked aria-hidden show up when clicking on Popup Proxy (cover mode) #17810

@mityaua

Description

@mityaua

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?

  1. Go to the Quasar's website https://quasar.dev/vue-components/popup-proxy/#breakpoint on Chrome
  2. Scroll down to Breakpoint section
  3. Open the browser's Developer tools
  4. Click on date picker several times (3 or more)
  5. You should be able to observe and error in the developer tools.

Image

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).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions