Screen Reader: Settings-Profile: The currently active menu button is not announced as such #75556
Description
Action Performed
Prerequisites:
- The user is signed in
- Using JAWS + Chrome, open the site https://new.expensify.com/settings/profile
- Press Tab key to focus the currently selected menu button 'Profile'
- Note how the element is displayed and announced.
Expected Result
The visually selected menu button should be announced as selected.
Actual Result
As the user navigates through the Account profile buttons, all the elements are only announced with the name of the button, and no context as to whether or not the button has already been selected or not.
- 'Profile, button'
HTML:
Area issue was found
Settings–Profile
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 the aria-current to announce the current menu button as such.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current
Environment(s)
Windows Windows 10 - Chrome
Screenshots/Videos
Bug6985987_1761589142571.Menu_buttons_do_not_announce_state.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/6985987
Issue reported by: NA
Slack conversation: NA