bug: Accessibility issue: Backdrop in ion-popover component has invalid aria-hidden value

[annamelnyk]

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

v7.x

Current Behavior

Backdrop (shadow part of ion-popover component) contains attribute aria-hidden=true, which is not correct from accessibility purposes.
Console shows error below:
Blocked aria-hidden on a <ion-backdrop> element because the element that just received 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

Expected Behavior

Backdrop (shadow part of ion-popover component) NOT contains attribute aria-hidden

Steps to Reproduce

1. Open the element
2. Click on backdrop
3. Popover will be dismissed and console error will appear

Code Reproduction URL

https://stackblitz.com/edit/angular-e2jj3l-tpkxhe?file=src%2Fapp%2Fapp.component.html

Ionic Info

Ionic:

Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.5.5
@angular-devkit/build-angular : 16.0.6
@angular-devkit/schematics : 16.0.6
@angular/cli : 16.0.6
@ionic/angular-toolkit : 9.0.0

Capacitor:
Capacitor CLI : 5.0.5
@capacitor/android : 5.0.5
@capacitor/core : 5.0.5
@capacitor/ios : 5.0.5

Utility:
cordova-res : not installed globally
native-run : 1.7.4

System:
NodeJS : v20.13.1
npm : 10.5.2
OS : Windows 10

Additional Information

No response

[dev-charles15531]

I am not able to see any sort of warning or error in my console when I click the backdrop.
I am using the issue reproduction url you sent.

[annamelnyk]

@dev-charles15531 thank you for quick reply.
To see the error open console in browser devTools, not in Stackblitz.

I did cross browser testing on Windows 11:

• Chrome v127 - shows error
• Edge v127 - shows error
• Mozilla v129 - does not show error

[boluwatifee4]

is this resolved ?

[wiktor-wrzaszcz]

Bump, its so annoying while debugging. Please fix it! Seeing it on chrome when closing modal as well.

[annamelnyk]

Hi ionic-team, is there any updates regarding current issue? Thanks in advance!

[maniya108]

Hi Team, We are using ionic 8.2.7 core and angular 18.2.0. Our team also facing the same issue while opening modal controller and clicking outside to close (backdrop close).

Please refer the below error.

Blocked aria-hidden on a element because the element that just received 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.

<ion-backdrop part=​"backdrop" tabindex=​"-1" aria-hidden=​"true" class=​"ios" style>​#shadow-root (open)</ion-backdrop>​

[D3rDicke]

Hi, i have the same problem is there any fixes or updates ?

[ingbioservicios]

Hi, i have the same problem is there any fixes or updates ?

[vityapro]

"@ionic/vue": "7.8.6",
"nuxt": "3.13.0"
Same issue

[dangduoc]

I have the same problem. Hope it would get fixed soon, thanks!

[KeyTurns]

Same here! Would really appreciate if they could solve this, it's highly frustrating.

[Sagie501]

Same for me

[m345054]

Same

[doogie99]

Ditto