bug: Alerts/dialog messages cannot be modified using any aria overrides

[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, when they read out a message in a dialog it may not be clear to them. This is because the developer of the app cannot use properties such as aria-label or role="text" to override aspects such as the message in the alert.

Expected Behavior

The developer should be able to override the aria attributes of the message (maybe other elements too but this is the only one causing me issues currently) to ensure that the message is read out clearly to users of screen readers. Acronyms, capitalised text, text with HTML can all be read out wrongly by screen readers so it is necessary to be able to override anything that could be read out.

In this HTML dialog, this is read out like "APOSTROPHE DO YOU SEE". The text should be assigned the role="text" as per the Ionic accessibility documentation: https://ionic.io/docs/accessibility/workarounds#reading-formatted-text

This dialog is read out as "PROCESSING PERIOD PERIOD PERIOD". The text should be overridable to "PROCESSING" only using an aria-label attribute.

The developer should be able to override the message's attributes to fix these issues but it appears they are ignored.

HTML dialog example, there are many issues with this example. "read" is pronounced wrong, "PREFERABLY" is read out letter by letter. It is very difficult to understand in TalkBack:

Screen.Recording.2024-09-11.124101.mp4

Processing... example:

Screen.Recording.2024-09-11.124125.mp4

The developer should be able to override the message's attributes to fix these issues but it appears they are ignored.

Steps to Reproduce

1. Add an alert controller using dependency injection
2. Show an alert that uses HTML, an acronym, stylised text or contains … (anything that TalkBack has a problem reading out correctly
3. Using TalkBack on Android, open the alert and try to read the element

Using the reproduction project, press the "Create HTML alert" button or the "Open loading dialog" button to trigger dialogs with the issue.

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

The documentation for alerts/dialogs says "All ARIA attributes can be manually overwritten by defining custom values in the htmlAttributes property of the Alert." but this is maybe only working for the alert as a whole or the buttons? I was not able to get the role to apply correctly for the dialog (which wouldn't have been adequate to fix this issue as the role needs applied specifically to the message). I was not able to target the message with any aria or role overrides no matter what I tried.
https://ionicframework.com/docs/api/alert#accessibility