ibm-js / deliteful

Multichannel (desktop/mobile) UI Custom Elements Library
http://ibm-js.github.io/deliteful
Other
70 stars 36 forks source link

List: support direct navigation to widgets in cells #722

Closed wkeese closed 5 years ago

wkeese commented 5 years ago

As explained in https://www.w3.org/TR/wai-aria-practices/#gridNav_focus:

There are two optimal cell design and focus behavior combinations:

  • A cell contains one widget whose operation does not require arrow keys and grid navigation keys set focus on that widget. Examples of such widgets include link, button, menubutton, toggle button, radio button (not radio group), switch, and checkbox.
  • A cell contains text or a single graphic and grid navigation keys set focus on the cell.

This ticket is for the first behavior: Rather than navigating to the cell, make the arrow keys navigate directly to the widget it contains.

The reasons for the enhancement are:

List should only focus a contained widget if the cell contains other widgets, or contains text. It should also only focus if the descendantSelector() method matches that widget rather than the cell.

The latter test is to avoid navigation getting trapped inside of controls that widgets up/down/left/right arrow keystrokes.

The exception is for DropDownButton (and similar controls). We want focus to directly go to the DropDownButton but the up/down arrow keys should navigate to other grid cells, rather than opening the dropdown.