Screen Reader: Settings-Troubleshoot: Submit a bug button not focusable. #76070
Description
Action Performed:
Prerequisite:
User is logged in
- Using JAWS + Chrome, open the page https://new.expensify.com/settings/troubleshoot
- Attempt to navigate using TAB to the 'Submit a bug' button within the 'Troubleshoot' informational paragraph
- Observe the element is not focusable via TAB key.
Expected Result:
The 'Submit a bug' element should be focused with Tab key and announced with a actionable role'.
Actual Result:
The 'Submit a bug' button, located in the informational paragraph under 'Troubleshoot' is not focusable with Tab key. During navigation this element is skipped. Hence, 'Submit a bug' button and its associated function will not be available for the keyboard users.
HTML:
submit a bug
Workaround:
Unknown
Area issue was found in:
Settings-Troubleshoot
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:
Make the control 'Submit a bug' tab focusable by provide an actionable to the control using native elements such button.
Environment:
Windows Windows 10 - Chrome
Screenshots/Videos
Bug6995266_1762368892609.Submit_a_bug_button_not_accessible_via_TAB__no_role_is_announced.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/6995266
Issue reported by: NA
Slack conversation: NA