ionic-framework
ionic-framework copied to clipboard
ionic-team
bug: Accessibility issue: Backdrop in ion-popover component has invalid aria-hidden value
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
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
- Open the
element - Click on backdrop
- 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
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.
@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
Bump, its so annoying while debugging. Please fix it! Seeing it on chrome when closing modal as well.
Hi ionic-team, is there any updates regarding current issue? Thanks in advance!
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
<ion-backdrop part="backdrop" tabindex="-1" aria-hidden="true" class="ios" style>#shadow-root (open)</ion-backdrop>
Same here! Would really appreciate if they could solve this, it's highly frustrating.
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)
Same here I am using ionic 5 / angular 13.
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.
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.
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.
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.
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.
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], })
