Grid: keyboard accessibility in interactive mode

[juanca]

Follow up to keyboard accessibility in browse mode

P.S. The PR description started off the same but has been updated with new findings and better perspective.

Motivation

According to the accessibility standards, a composite widget needs to have keyboard navigation. This implies three things:

• The composite widget is only once in the tab sequence of the page.
• Once the composite widget itself has focus, navigating around the internal widgets (i.e. grid cells) is possible with the arrow keys.
• Once a grid cell has focus (thus in active mode), it can toggle between interactive and active modes.

Due to high probability of keyboard shortcut conflict between the grid and its grid cells, the grid is in "browse" mode until a grid cell is activated. While the grid cell is inactive, it does not respond to any key presses.

• Browse mode: inactive grid cells with arrow keys as a means to focus adjacent cells
• <enter> / <click>: render interactive grid cell
• <esc>: cancel grid cell changes and render active grid cell
• <enter>: accept grid cell changes and render active grid cell

The grid component should support both modes: browse and interactive (wording can be updated later). This PR will only focus on interactive mode.

Technical changes and implications

[juanca]

Two bugs:

• [x] Column Header should not go into "interactive" mode since there is none
• [x] Grid is not focusable on first mount (bug from previous PR)

Some interesting investigations to do (as follow ups):

• The input cell should go into edit mode when it is active and an alphabetical key is pressed (like Google Sheets)
• When a cell is in interactive mode, <tab> (<shift> + <tab>) should focus horizontally adjacent cells
• When a cell is in interactive mode, <enter> (<shift> + <enter>) should focus vertically adjacent cells

[juanca]

It's a little bit of a shame that tabbing through fields won't work (correct me if I'm wrong there), since that's what power-users coming from Excel / spreadsheets will be used to.

Exactly. I am working with a designer to explore different user experiences for power users. For example:

• While editing a cell, <tab> could save the cell and move interactive focus to the adjacent cell

I think this still follows the spirit of the w3 ARIA spec since a user can get out of "tab hell" by disabling interactive mode and then tabbing out of the grid.

More to come!