Closed annamelnyk closed 1 week ago
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:
is this resolved ?
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>
Hi, i have the same problem is there any fixes or updates ?
Hi, i have the same problem is there any fixes or updates ?
"@ionic/vue": "7.8.6",
"nuxt": "3.13.0"
Same issue
I have the same problem. Hope it would get fixed soon, thanks!
Same here! Would really appreciate if they could solve this, it's highly frustrating.
Same for me
Same
Ditto
Same for me
Same
Bump
+1
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.
Same here Ionic 6 / Angular 15
Same here. Using latest version of Ionic React.
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.
I confirm that I am facing the same issue with the latest version of Chrome.
The same here "@ionic/angular": "^8.2.0"
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], })
@shehzad031248 - Can you please post the sample code?
@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], })
Thanks for the issue! This has been resolved via https://github.com/ionic-team/ionic-framework/pull/29956 and will be available in an upcoming release of Ionic.
Prerequisites
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
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