[feat]: Update roving-tabindex-controller key handling based on based on grid, tree, and listbox roles

[nikkimk]

Needed for any components that will be using a grid, tree, and listbox. For example, search, dropdown, and autocomplete

Keyboard navigation for grid, tree, and listbox

All three

• up arrow: moves to previous item in horizontal listbox, node in tree, or row in grid
• down arrow: moves to next item in horizontal listbox, node in tree, or row in grid
• home (optional): moves to first item in a listbox, node in tree, or gridcell in a row
• end (optional): moves to last item in a listbox, node in tree, or gridcell in a row

Listbox-specific keyboard interaction

• When a single-select listbox receives focus:
  • If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected.
  • If an option is selected before the listbox receives focus, focus is set on the selected option.
• When a multi-select listbox receives focus:
  • If none of the options are selected before the listbox receives focus, focus is set on the first option and there is no automatic change in the selection state.
  • If one or more options are selected before the listbox receives focus, focus is set on the first option in the list that is selected.
• left arrow: moves to previous item in vertical listbox
• right arrow: moves to next item in vertical listbox
• Type-ahead is recommended for all listboxes, especially those with more than seven options:
  • Type a character: focus moves to the next item with a name that starts with the typed character.
  • Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Tree keyboard interaction

• For a vertically oriented tree:
  • When a single-select tree receives focus:
    • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
    • If a node is selected before the tree receives focus, focus is set on the selected node.
• When a multi-select tree receives focus:
  • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
  • If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.
• left arrow: when focus is on a closed node, opens the node; when focus is on an open node, moves focus to the first child node.
• right arrow: when focus is on an open node, closes the node; when focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
• * (optional): Expands all siblings that are at the same level as the current node.
• Type-ahead is recommended for all trees, especially for trees with more than 7 root nodes:
• Type a character: focus moves to the next node with a name that starts with the typed character.
• Type multiple characters in rapid succession: focus moves to the next node with a name that starts with the string of characters typed.

Grid keyboard interaction

• left arrow: moves to previous gridcell in grid
• right arrow: moves to next gridcell in grid
• pageDown (optional): moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
• pageUp (optional): moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
• ctrl+home (optional): moves focus to the first cell in the first row.
• ctrl+end (optional): moves focus to the last cell in the last row.

Impacted component(s)

• roving-tabindex-controller
• future field components using grid, tree, and listbox roles
• will need to make sure changes don't affect existing components that use roving-tabindex-controller

Related issues

• [feat] pfe-autocomplete UX guidance #372
• [feat] pfe-autocomplete | Doesn't work with list of objects, only with strings #465
• pfe-dropdown: role attribute not set properly in React and Vue #1010
• [1:1] pf-dropdown #2049
• PFE-Dropdown has incorrect aria and a11y setup #2054