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: Alerts/dialogs have unnecessary focus boxes with no description when using Android TalkBack #29858

Closed
3 tasks done
ronan-burke-civ opened this issue Sep 11, 2024 · 1 comment · Fixed by #29970
Closed
3 tasks done
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@ronan-burke-civ
Copy link

ronan-burke-civ commented Sep 11, 2024

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When showing an alert in an app, if the user is using TalkBack, there will be an element before and after the dialog that the user can "focus" on. This element has no TalkBack description and TalkBack just makes a noise when selecting it. This makes the dialog confusing/less accessible.

Expected Behavior

These hitboxes/focus boxes should be hidden from the accessibility tree. Users should only see the alert heading, message, buttons etc. This issue may apply to other types of dialog.

Steps to Reproduce

1. Add an alert controller using dependency injection
2. Show an alert
3. Using TalkBack on Android, open the alert and try to navigate through all elements in the alert

Using the reproduction project, press the "Create HTML alert" button to trigger a dialog with the issue.

Video example showing the unnecessary focus boxes with no description:

Screen.Recording.2024-09-11.123940.mp4

Code Reproduction URL

https://github.com/BurkusCat/accessibility-testing

Ionic Info

PS C:\dev\accessibility-testing> ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\Ronan.Burke\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Ronan.Burke\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Ronan.Burke\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Ronan.Burke\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.1.1 (C:\Users\Ronan.Burke\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.3.0
@angular-devkit/build-angular : 18.2.3
@angular-devkit/schematics : 18.2.3
@angular/cli : 18.2.3
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.9.0 (C:\Program Files\nodejs\node.exe)
npm : 10.1.0
OS : Windows 10

Additional Information

These two elements in the HTML are maybe causing the issue. Perhaps by adding aria-hidden="true" to them would resolve the issue. Or removing their tabindex property.

image

@ionitron-bot ionitron-bot bot added the triage label Sep 11, 2024
@brandyscarney brandyscarney added the type: bug a confirmed bug report label Oct 22, 2024
@ionitron-bot ionitron-bot bot removed the triage label Oct 22, 2024
@brandyscarney brandyscarney added triage package: core @ionic/core package labels Oct 22, 2024
@ionitron-bot ionitron-bot bot removed the triage label Oct 22, 2024
github-merge-queue bot pushed a commit that referenced this issue Oct 29, 2024
Issue number: resolves #29858

---------

## What is the current behavior?
When swiping between elements using Android TalkBack, a green box is
shown for certain overlays and it gains focus at the beginning and end
of those overlays:

<img width="419" alt="Screenshot 2024-10-25 at 2 44 45 PM"
src="https://github.com/user-attachments/assets/dffd8126-ec1d-4b6f-87fc-6488c7c09aab">

## What is the new behavior?
The `aria-hidden` attribute is now added to the focus trap divs to hide
them from screen readers, without preventing these divs from trapping
keyboard focus.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
Dev build: `8.3.4-dev.11729882231.1b2e7f13`
Copy link

ionitron-bot bot commented Nov 28, 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 28, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants