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

[mitchfaulcon]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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