aurelia / aurelia/ui-virtualization
Accessibility - with a screen reader, items not in the DOM are inaccessible
- Dominant language
- TypeScript
- Stars
- 89
- Forks
- 44
- PR merge metrics
- No merged PRs in 30d
Description
With a mouse or keyboard, it's possible to scroll the list element to reveal more virtual items - previous, or next. Testing with Voiceover in Safari (OSX 10.10) with the demo application, someone using a screen reader cannot access elements in the list that are not in the DOM.
I believe that a fix for this could be to add a hidden element at the beginning and end of the DOM list (of the same type as the element with the virtual-repeat property) that contains a button or link of some type that would manually call the scroll event to load a new page of list elements. (We could possibly do that on focus, but I don't know if that's an accessibility trap.)
I imagine that when the list is in the home or end position, the corresponding element would be removed from the DOM.
I'm definitely open to suggestions and I'll probably continue testing this locally to see what else I find.
Contributor guide
Research direction
Start with the demo application and the list element using the virtual-repeat property, reproducing the issue with VoiceOver in Safari. Trace how virtual items enter and leave the DOM and determine how screen-reader users can reach items outside the rendered range; done means the full list is navigable without relying on mouse or keyboard scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100