You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Tab to focus on the required workspace and press Enter to activate it
Once the Workspace menu is displayed, tab to focus on the "Categories" menu item and press Enter to activate it
Tab to focus the More button and observe the screen reader announcement.
Expected Result:
The accordion button should communicate its expanded or collapsed state to assistive technologies. When expanded, the button should indicate “expanded”, and when collapsed, it should indicate “collapsed”.
Actual Result:
The expanded collapsed state of the accordion button "more" is not announced by the screen reader upon activation. When focused the screen reader only announces the role and label of the control without indicating whether it is expanded or collapsed. As a result, users relying on assistive technologies cannot determine the current state of the accordion content.
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:
Add the "aria-expanded" attribute to the accordion button to indicate its current state.
Action Performed:
Prerequisite:
Expected Result:
The accordion button should communicate its expanded or collapsed state to assistive technologies. When expanded, the button should indicate “expanded”, and when collapsed, it should indicate “collapsed”.
Actual Result:
The expanded collapsed state of the accordion button "more" is not announced by the screen reader upon activation. When focused the screen reader only announces the role and label of the control without indicating whether it is expanded or collapsed. As a result, users relying on assistive technologies cannot determine the current state of the accordion content.
HTML:
Area issue was found in:
Workspace Category
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:
Add the "aria-expanded" attribute to the accordion button to indicate its current state.
Refer:
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
Environment(s)
Windows Windows 11 - Chrome
Screenshots/Videos
Bug6996806_1762786478474.Screen_Reader-_Workspace_Category-The_accordion_button_is_announced_without_a_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/6996806
Issue reported by: NA
Slack conversation: NA
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @mallenexpensify