juanca / react-aria-components

React ARIA-compliant Components
https://juanca.github.io/react-aria-components
MIT License
6 stars 3 forks source link

Grid component has keyboard accessbility #9

Closed juanca closed 6 years ago

juanca commented 6 years ago

Although VoiceOver has good keyboard navigation in the grid example, it is still non-compliant with keyboard navigation outside VoiceOver.

This is an example with basic cells and keyboard navigation.

juanca commented 6 years ago

This example has a data grid and an interactive cell (input that is editable):

https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html#ex2_label

It has a read-only state and an editing state which is activated by <enter>.

juanca commented 6 years ago

Keyboard accessibility for browse mode: https://github.com/juanca/react-aria-components/pull/11

juanca commented 6 years ago

Keyboard accessibility for interactive mode: https://github.com/juanca/react-aria-components/pull/20

juanca commented 6 years ago

Done. The grid seems to be fully keyboard accessible -- with a degraded UX for IE11.

I am exploring power UX alternatives while on the subject of a Grid. However, that is outside the scope of this issue, thus closing this.