Screen Reader: Sign in: Incorrect announcement of the 'Language' dropdown #77541
Description
Action Performed:
- Using Android TalkBack, open the Expensify app
- Swipe to the 'Language' dropdown
- Listen to the TalkBack announcement
Expected Result:
The expected result is a clear, functional announcement: "Select Language, button." (and, if expanded, would announce the state).
Actual Result:
TalkBack announces the control as: "[Language Name], edit box, disabled." (e.g., "English, edit box, disabled.")
Area issue was found in:
Sign in
Failed WCAG checkpoints
WCAG 4.1.2 Name, Role, Value
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value
User impact:
Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.
Suggested resolution:
Remove the disabled state as the control is interactive.
https://reactnative.dev/docs/accessibility#accessibilitystate
Use a descriptive accessibilityLabel, e.g.:
- 'select language '
https://reactnative.dev/docs/accessibility#accessibilitylabel
Use the combobox role.
https://reactnative.dev/docs/accessibility#accessibilityrole
Environment:
Samsung Galaxy S24 Ultra - Android 14, Partner - Native (No mobile browser)
Screenshots/Videos
Bug7005061_1763226988190.Incorrect_announcement_of_the__Language__dropdown.mp4
Version Number: Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): No
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7005061
Issue reported by: NA
Slack conversation: NA