Screen Reader: Onboarding: The displayed progress bar is not focused and announced #77331
Description
Action Performed:
Precondition: The User should be logged in
- Using Android TalkBack or iOS VoiceOver, open the Expensify app
- Start the onboarding flow
- Try to swipe to the displayed progress bar
- Note that the bar is not focused and announced
Expected Result:
The progress bar should be reachable and announced, e.g.:
- 'progress bar, step 1 of 5'
Actual Result:
The progress bar element is skipped entirely during TalkBack navigation. Users are unaware of which step in the onboarding flow is currently running.
Area issue was found in:
Onboarding
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:
Set accessible={true} to make the progress bar focusable.
https://reactnative.dev/docs/accessibility#accessible
Add a descriptive accessibilityLabel, e.g.:
e.g.:
Apply accessibilityRole="progressbar"
https://reactnative.dev/docs/accessibility#accessibilityrole
Environment(s)
Samsung Galaxy S24 Ultra - Android 14, Partner - Native (No mobile browser)
Apple iPhone 11 - iOS 17.5.1, H0T Mobile - Native (No mobile browser)
Screenshots/Videos
Version Number: Production
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/36628/community-issues/7005512
Issue reported by: NA
Slack conversation: NA