bug: Accessibility issue - ion-popover has aria-hidden error when dismissed
mitchfaulcon opened this issue · 7 comments
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
ion-popover element in popover has invalid aria-hidden attribute.
This issue does not happen in Firefox browsers but both Chrome & Edge show the following error in dev tools console when the popover is clicked off to close it:
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: ion-popover Ancestor with aria-hidden: <ion-popover>...</ion-popover>
We recently updated our project to ionic 8.4.0 to address the issue fixed in 29773 which did fix the aria-hidden error on the ion-backdrop element, but it's now present on the ion-popover element instead.
Expected Behavior
No aria-hidden error when closing popup
Steps to Reproduce
- On Chrome or Edge browser click on button to open popup
- Click on backdrop to dismiss popup
- Error thrown in dev tools console
Code Reproduction URL
https://stackblitz.com/edit/angular-t5gtgv
Ionic Info
Ionic:
Ionic CLI : 7.1.5
Ionic Framework : @ionic/angular 8.4.0
@angular-devkit/build-angular : 18.2.10
@angular-devkit/schematics : 17.3.11
@angular/cli : 18.2.6
@ionic/angular-toolkit : 11.0.1
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v20.10.0
npm : 10.9.0
OS : Windows 10
Additional Information
No response
Actually this happens in many more elements. I am on 8.4.0, and it happens in ion-page, ion-modal as well. Obviously on a page and on a modal there are buttons and other focusable elements. Whenever the component is dismissed, the browser emits this error (blocking aria-hidden, because descendant retains focus).