Upon dismissal of a modal, browser emits error for blocking aria-hidden

This can be reproduced by having any interactive element within a controller mounted modal, like a button or input.

When the modal is dismissed using dismiss(), the browser will emit an error in the console that it has blocked the modal’s aria-hidden attribute, because one of the child elements retained focus. I assume it is the button that triggered the dismiss event.

How can this error be fixed?

Sounds similar to this issue - bug: Accessibility issue - ion-popover has aria-hidden error when dismissed · Issue #30040 · ionic-team/ionic-framework · GitHub

1 Like

Thanks, i was going to open an issue as well but figured to try the forum first. The error happens whenever a component is dismissed, not just on backdrop.

1 Like

The error occurs because focus remains on an interactive element when the modal is dismissed. To fix this, you can manually manage focus when closing the modal. Ensure that focus is either moved to a safe element (like the body or a close button) before dismissing the modal. You could also use aria-hidden="true" to hide the modal before the dismissal to prevent it from blocking the attribute. Another option is to delay the dismissal until focus has been appropriately managed.