bug: aria-label ignored on ion-select-option when using 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 using an ion-select with ion-select-option elements, if the user is using TalkBack, if an element is read out incorrectly by TalkBack, it cannot be corrected using an aria-label to provide a more suitable label for screen readers.

Example: If an uppercased style is applied to the options such as "YES" or "NO". The screen reader may read out the "NO" option as "NUMBER" which is incorrect. In this situation a developer must be able to override this text with an aria-label the app is not accessible. Currently, the aria-label override is ignored for both the value displayed in the ion-select and the ion-select-options that show in the alert dialog.

Expected Behavior

The developer should be able to override the aria attributes of the ion-select-option and the value of the ion-select.

Steps to Reproduce

1. Add an ion-select with some options that are not read out correctly by the TalkBack screen reader
2. Using TalkBack, select the element and open the picker. Try navigating between the options and select one. 

Using the reproduction project, use the "Yay or nay" ion-select to see how the aria-label is ignored and the wrong values are read out by TalkBack for each value both in the ion-select and in the alert that opens with the ion-select-options.

The reproductive uses text-transform: uppercase; styling to modify the select options. This styling also impacts how TalkBack reads the data even though the underlying data is sentence case. This is just one of the situations that require the ability to override the label. Another example of an issue which would require this property to be taken into account is something like "NI" is read out as a word instead of as "N I" or "NORTHERN IRELAND".

Screen.Recording.2024-09-11.124834.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

N/A