bug: Alerts/dialogs have unnecessary focus boxes with no description when using Android TalkBack

[ronan-burke-civ]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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.

[ionitron-bot]

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.