Screen Reader: Settings-Profile: The Search button has no role announced #74888
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 Search button at the top right corner.
- Note how the control is announced.
Expected Result
The Search button should be announced with a button role.
Actual Result
When users navigate to the search button element, it is announced without the role. Screen reader only announces it as 'Search'. Users will not understand this is an actionable element
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
Implement the control as a native button.
https://www.w3.org/WAI/ARIA/apg/patterns/button/
Environment(s)
Windows Windows 10 - Chrome
Screenshots/Videos
Bug6985956_1761587112163.Search_button_has_no_role.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/6985956
Issue reported by: NA
Slack conversation: NA