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

[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>​

[rajibhasan11]

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.

You need to use this version of Chrome Version 128.0.6613.85 (Official Build) (64-bit)

[averyjohnston]

Not sure if this helps or makes things more confusing, but I'm using Ionic React 8.2.7 and Chrome 128.0.6613.120 on a Windows 10 machine, and I'm seeing the error as well. However, it seems to be intermittent; refreshing the page often makes the error stop appearing. I was able to get it to reappear once by clearing my cache and refreshing (ctrl+shift+r) but only once. Not sure what the exact trigger is.

[brandyscarney]

Thank you for the issue! I was unable to reproduce this using Chrome 126, Firefox 128/129/130 or Safari 17. However, after updating Chrome to 128.0.6613.120 I am able to see the error in the original StackBlitz reproduction.

This seems to be caused by Chrome enforcing accessibility rules more strictly. I am marking this as needs: investigation because we will need to investigate the best way to fix this.

[gasci]

I confirm that I am facing the same issue with the latest version of Chrome.

[thetaPC]

Thank you for submitting the issue! I was also able to reproduce the issue.

The error is happening because tabindex and aria-hidden are being passed to ion-backdrop. The tabindex attribute is used to make an element focusable, regardless of value. When aria-hidden is applied to an element, then the element is hidden from screen readers. This violates the accessibility standards since ion-backdrop would be considered a focusable element but not visible to screen readers.

We'll be implementing a solution soon.

[zolakt]

Are there any workarounds that would suppress this error, until the proper fix is released?
Don't care about screen readers in my project, I just want to get rid of the error, so it doesn't pollute error logs.

[shehzad031248]

I have added "CUSTOM_ELEMENTS_SCHEMA" which resolved this issue.

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@component({
selector: 'app-basic-data',
standalone: true,
templateUrl: './basic-data.page.html',
styleUrls: ['./basic-data.page.scss'],
imports: [CommonModule, IonicModule, ReactiveFormsModule],
providers: [ModalController, BasicDataService, AlertsService, UtilsService, LoadingService],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

[seatechdev]

@shehzad031248 - Can you please post the sample code?

[shehzad031248]

@shehzad031248 - Can you please post the sample code?

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@component({
selector: 'app-basic-data-form',
standalone: true,
templateUrl: './basic-data.page.html',
styleUrls: ['./basic-data.page.scss'],
imports: [CommonModule, IonicModule, ReactiveFormsModule],
providers: [ModalController, BasicDataService, AlertsService, UtilsService, LoadingService],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

[thetaPC]

Thanks for the issue! This has been resolved via #29956 and will be available in an upcoming release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.