[$250] Screen Reader: Many Pages: The visually selected option is not announced as such #74875
Description
Action Performed
Prerequisite:
- User is logged in
- Using JAWS + Chrome, open the URL: https://new.expensify.com/
- Tab to focus on the "My Settings" button and press Enter to activate it
- Once the My Settings menu is displayed, tab to focus on the "Preferences" menu item and press Enter to activate it
- Tab to focus on the "Language" button and press Enter to expand it
- Use the tab key to focus the visually selected language option.
- Note how the option is announced.
Other Occurrences:
- On Settings - Preferences - Priority mode
- On Settings - Profile - Address - Country
- On Workspace - Rules - Cash Expense Default
- On Workspace - Company cards: the options of countries
- On Workspace - Company cards: the options of banks
- On Workspace - Company cards: the options of connect options
- On Workspace - Create Workspace - Default Currency
- On Create Report - Change payment currency
- On Wallet - Add bank account
Expected Result
The selected option should be both visually and programmatically indicated as selected. When an option is visually highlighted, its selected state should be announced appropriately to users through assistive technology. The component should clearly convey which option is currently active or chosen.
Actual Result
When navigating through the language selection options, the currently selected option (e.g., “English”) is visually highlighted but not programmatically indicated as selected.
Users relying on assistive technologies, including those with visual, cognitive, or learning disabilities who use text-to-speech software, do not receive any feedback that indicates which option is currently active or selected.
This can cause confusion and make it difficult to confirm the current language choice.
HTML:
Area issue was found
Settings-Preferences
Failed Checkpoint
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
Use appropriate ARIA semantics to indicate the selected state. For example: if the control behaves like a listbox, use role="listbox" for the container and role="option" for each item, with aria-selected="true" on the active item. Update the selected state dynamically when the user changes the selection.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/listbox_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected
An alternative is to update the currently used aria-label and to include the selected state when the option is selected
Environment(s)
Windows 11 Home - Chrome
Screenshots/Videos
Bug6995910_1762424622140.Screen_Reader-Settings-Preferences-The_visually_selected_option_is_not_announced_as_such.mp4
Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
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/36605/community-issues/6995910
Issue reported by: NA
Slack conversation: NA
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~022013829431002569529
- Upwork Job ID: 2013829431002569529
- Last Price Increase: 2026-01-21