Grid navigation edit mode

[dannify]

This is to solve for the “Editing and Navigating Inside a Cell” case within grid. A user needs the ability to navigate between elements within a card (cell) without it interfering with the grid navigation. For this, we will need to implement an “edit mode” for the cells. This mode will also be applied to TableView when trying to use components such as textfield that also utilizes arrow key functionality.

Keyboard pattern:

• Navigate to a cell
• Press enter
  • If cell doesn’t have any focusable children, do nothing
  • Otherwise, focus the first focusable child
• You can tab between the elements inside the cell, and it wraps around
• All other grid navigation keyboard commands are disabled while in edit mode, including arrow keys, typeahead, page up/page down, home/end, etc.
• Press escape to get out or focus a different cell
• Provide a way for users to programmatically activate edit mode

See also: https://www.w3.org/TR/wai-aria-practices-1.2/#gridNav_inside

This could be implemented in useGridCell and prevent events from going to useSelectableItem/useSelectableCollection when editing.

API:

Add isEditable prop to Cell and useGridCell

• When true - arrow key navigation to focusable children is disabled when not in edit mode
• When false - arrow key navigation to focusable children is enabled (existing behavior).

#3258 has a partial implementation of this edit mode