FlashList accessibility confusing order #86126
Description
Action Performed:
Open any page that uses FlashList. Any component that uses SelectionListWithSections has it.
For example:
- go to Inbox.
- use Screen reader to navigate the list up and down
Expected Result:
You can scroll all the way down and up
Actual Result:
You are going to skip elements along the way and not be able to go all the way down and it will exit the list too early like it already finished displaying it.
Workaround:
Use scrolling, like mouse scrolling. Apparently you can tell screen readers to perform scroll.
Area issue was found in:
From my experience working on migrating SelectionListWithSections
Failed WCAG checkpoints
Primary violation:
- 4.1.2: Name, Role, Value (A)
- 1.3.1: Info and Relationships (A)
- 2.4.3: Focus Order (A)
User impact:
User can't navigate through most of the lists in our app reliably
Suggested resolution:
Working on it in this PR which focuses on patching FlashList so that its has the correct DOM order of its elements.
Platforms:
Which of our officially supported platforms is this issue occurring on? Please only tick the box if you have provided a screen-recording in the thread for each platform:
- Android: App
- Android: mWeb Chrome
- iOS: App
- iOS: mWeb Safari
- iOS: mWeb Chrome
- Windows: Chrome
- MacOS: Chrome / Safari
Screenshots/Videos
Version Number: NA
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: NA
Notes/Photos/Videos:
FlashList.navigation.bugs.mp4
Expensify/Expensify Issue URL: NA
Issue reported by: NA
Slack conversation: NA