bug: Accessibility issue - ion-popover has aria-hidden error when dismissed

[mitchfaulcon]

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

1. On Chrome or Edge browser click on button to open popup
2. Click on backdrop to dismiss popup
3. 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

[pkunszt]

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

[raykin]

@pkunszt do you have workaround to fix it? The error is really annoy cause it don't provide info for app development. And it seems only alert error in latest Chrome browser.

[WhoofWhoof]

I am having the same issue on almost all modals I open

[marshall86]

the same issue is related to the ion-loader as well. I sorted it out adding an html attribute in the "htmlAttributes" loadingOptions of the loadingCtrl.create(loadingOptions);

[ingbioservicios]

@marshall86 Can you provide an example?

[marshall86]

@marshall86 Can you provide an example?

i'm using ionic/angular 8.1.0 yet but I got that kind of warning only using ion-loading component. As a workaround, I found out that using the "htmlAttributes" inside the LoadingOptions that you pass to the loading controller create method.
Here an example:

const loadingOptions: LoadingOptions = { cssClass: 'custom-loader', message: 'Please wait...', htmlAttributes: [{ 'prevent-aria-hidden-error': true }], backdropDismiss: false }; const loader = await this.loadingCtrl.create(loadingOptions);

[pkunszt]

I can confirm that this htmlAttribute prevents the error for the loading controller, and probably also works for other controllers. However, it still persists for any page i am navigating from. And there the aria-hidden is inserted by the framework. So this is a bug that should be fixed.