Keyboard Navigation Behavior (Arrow key vs Tab)

[jcfilben]

Currently on Grommet we have a mix of components that use arrow keys to navigate and some components that use tab to navigate. There are also components that leave the focusIndicator on the container, components that have the focusIndicator on items within the container, and components that don't show a focusIndicator.

It would be great to gain more clarity on what the correct accessibility behavior is.

• Should we settle on 1 type of interaction tab or arrow key?
• Do we need to support both types of keyboard navigation (perhaps with a global theme prop to switch between tab vs arrow key based interaction)?
• Should the focusIndicator be on the container or on an individual item within the container?

Tab based navigation components:

• CheckBoxGroup (focusIndicator is on individual CheckBox)
• Pagination (focusIndicator is on individual button)
• Tabs (focusIndicator is on individual Tab)

Arrow key based navigation components:

• Calendar (focusIndicator is on the container)
• DataTable (focusIndicator is on the container)
• List (focusIndicator is on the container)
• RadioButtonGroup (focusIndicator on individual RadioButton)
• Select (no focusIndicator)

Supports both:

• Menu (no focusIndicator)