Details
-
Bug
-
Resolution: Unresolved
-
P2: Important
-
None
-
5.15, 6.7, 6.8
-
None
Description
Focusable items in a ListView/GridView participate in the normal tab chain; i.e., when the focus is on the view or an item within it, using the tab key to navigate will take you to another item within the view, instead of bringing the focus out of the view. For a finite set of items, this is fine, but unwieldy. For a non-finite set of items, this results in a one-sided keyboard trap: focus can enter and leave the item view from one side, but on the other side, the item view can be entered but not exited.
This is a straightforward violation of accessibility standards:
- 🌐 WCAG2 §2.1.2: No Keyboard Trap
- 🇪🇺 ETSI EN 301 549 §11.2.1.2 and §9.2.1.2 : No Keyboard Trap
- 🇺🇸 ICT Accessibility 508 Standards: §302.1, §302.2, §302.7
Even in the cases where the violation isn't trivial, this still results in a subpar experience for keyboard users that may need tens or hundreds of keystrokes to move the focus to where a pointing device could point to with a single stroke.
For ListViews, the solution is quite simple: use the left/right keys to move focus in a subchain between the item itself and its focusable children.
For GridViews, the solution would need GridView to adopt the same keyboard navigation form as the ListView in order to free up the left/right keys for this navigation scheme.
A web-based example of the accessible behaviour is demonstrated here, courtesy of the react-aria library: https://focus.blackquill.cc/