Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
annamelnyk opened this issue Aug 15, 2024 · 33 comments · Fixed by #29956
Closed
3 tasks done
Labels
type: bug a confirmed bug report

Comments

@annamelnyk
Copy link

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

@ionitron-bot ionitron-bot bot added the triage label Aug 15, 2024
@dev-charles15531
Copy link

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
Copy link
Author

@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

This comment was marked as outdated.

@wiktor-wrzaszcz

This comment was marked as duplicate.

@annamelnyk

This comment was marked as outdated.

@maniya108
Copy link

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

This comment was marked as duplicate.

1 similar comment
@ingbioservicios

This comment was marked as duplicate.

@vityapro

This comment was marked as duplicate.

@dangduoc

This comment was marked as duplicate.

@KeyTurns

This comment was marked as duplicate.

@Sagie501

This comment was marked as duplicate.

@m345054

This comment was marked as duplicate.

@doogie99

This comment was marked as duplicate.

@soroush-gh

This comment was marked as duplicate.

@wrodriguezmethodo

This comment was marked as duplicate.

@ibilux

This comment was marked as spam.

@tbence94

This comment was marked as duplicate.

@rajibhasan11
Copy link

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

This comment was marked as duplicate.

@fabichacon

This comment was marked as duplicate.

@jackhipson300

This comment was marked as duplicate.

@averyjohnston
Copy link
Contributor

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 brandyscarney added the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Sep 4, 2024
@ionitron-bot ionitron-bot bot removed the triage label Sep 4, 2024
@brandyscarney
Copy link
Member

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
Copy link

gasci commented Sep 5, 2024

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

@Hambat

This comment was marked as duplicate.

@thetaPC
Copy link
Contributor

thetaPC commented Sep 12, 2024

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.

@thetaPC thetaPC added type: bug a confirmed bug report and removed needs: investigation This issue is waiting on more investigation from the Ionic Team. labels Sep 12, 2024
@zolakt
Copy link

zolakt commented Oct 16, 2024

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
Copy link

shehzad031248 commented Oct 20, 2024

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
Copy link

@shehzad031248 - Can you please post the sample code?

github-merge-queue bot pushed a commit that referenced this issue Oct 22, 2024
Issue number: resolves #29773

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Certain Chrome and Edge versions (confirmed: Chrome v127 and Edge v127)
would indicate that the backdrop has an accessibility violation:

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

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.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed `tabindex`, this aligns with frameworks known for
accessibility (Chakra UI)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.3.4-dev.11729533091.1ac77a0c`

How to test:

1. Use either Chrome v127 or Edge v127
2. Navigate to the [alert basic
page](https://ionic-framework-3pvgcj4b9-ionic1.vercel.app/src/components/alert/test/basic)
from the `main` branch
3. Open browser console
4. Click on the first button on the alert page
5. Click on the backdrop
6. Notice the error message in the browser console (if you don't see it,
then use a private browser or clear cache)
7. Navigate to the [alert basic
page](https://ionic-framework-git-rou-11175-ionic1.vercel.app/src/components/alert/test/basic)
from the `ROU-11175` branch
8. Repeat steps 2-6
9. Verify that the error does not appear
github-merge-queue bot pushed a commit that referenced this issue Oct 25, 2024
Issue number: stemmed from #29773

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Certain Chrome and Edge versions (confirmed: Chrome v127, v128, v129 and
Edge v127) would indicate that certain elements have an accessibility
violation:

```
Blocked aria-hidden on a "ELEMENT NAME" 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
```

This issue happens when a toast appears and the users clicks on any
element that is not related to toast. This is due to the main content
having an `aria-hidden` so users should not to be able to interact with
any of those elements. This isn't an issue when an overlay uses a
backdrop, like `ion-alert` because the backdrop prevents a user from
interacting with those elements.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- When toast is present, the main content no longer has an
`aria-hidden`. This aligns with accessibility guidelines. I also
verified with other Framework, MD states "Don't trap focus in the
snackbar. Users should be able to freely navigate in and out."

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.3.4-dev.11729879684.1ea28919`

1. Clone this
[repo](https://github.com/brandyscarney/test-angular-overlays)
2. Install deps
3. Run the app on a private browser (Chrome v127, v128, v129 or Edge
v127)
4. Open browser console
5. Click on "Open Toast" button
6. Click on any element other than "Open Toast" button, like "Open
Popover"
7. Notice the error message
8. Close private browser
9. Install dev build: `npm install
@ionic/angular@8.3.4-dev.11729879684.1ea28919`
10. Repeat steps 4-7
11. Verify that the error message doesn't occur
@shehzad031248
Copy link

@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
Copy link
Contributor

thetaPC commented Oct 28, 2024

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

Copy link

ionitron-bot bot commented Nov 27, 2024

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Nov 27, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.