search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.04k stars 13.51k forks source link

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

Closed annamelnyk closed 1 week ago

annamelnyk commented 2 months ago

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

  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 commented 2 months 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.

annamelnyk commented 2 months ago

@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:

boluwatifee4 commented 2 months ago

is this resolved ?

wiktor-wrzaszcz commented 2 months ago

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

annamelnyk commented 2 months ago

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

maniya108 commented 2 months ago

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

image
D3rDicke commented 2 months ago

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

ingbioservicios commented 2 months ago

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

vityapro commented 2 months ago

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

dangduoc commented 2 months ago

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

KeyTurns commented 2 months ago

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

Sagie501 commented 2 months ago

Same for me

m345054 commented 2 months ago

Same

doogie99 commented 2 months ago

Ditto

soroush-gh commented 2 months ago

Same for me

wrodriguezmethodo commented 2 months ago

Same

ibilux commented 2 months ago

Bump

tbence94 commented 2 months ago

+1

rajibhasan11 commented 1 month 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.

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

rajibhasan11 commented 1 month ago

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.

fabichacon commented 1 month ago

Same here Ionic 6 / Angular 15

jackhipson300 commented 1 month ago

Same here. Using latest version of Ionic React.

averyjohnston commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

Hambat commented 1 month ago

The same here "@ionic/angular": "^8.2.0"

thetaPC commented 1 month ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

@shehzad031248 - Can you please post the sample code?

shehzad031248 commented 3 days ago

@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 commented 1 day ago

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.