smart-table-keyboard

keyboard navigation for widgets implementing the grid pattern

Installation

npm install --save smart-table-keyboard

or

yarn add smart-table-keyboard

Usage

Assuming you have

<table role="grid">
<!-- ... your rows and cells -->
</table

import stk from 'smart-table-keyboard';

const grid = document.querySelector('table[role="grid"])' // the grid widget

stk(grid,{rowSelector:'tr', cellSelector:'th,td'});

Note it does not have to be a table: you can have for example

stk(document.querySelector('div[role="grid"]',{rowSelector:'[role="row"]', cellSelector:'[role="gridcell"]'});

skipping some elements

You can skip a cell or a row from the navigation by adding the attribute data-keyboard-skip="true" to the related html element(s)

Navigate within a cell

You can force navigation within a cell to sub widgets using the attribute data-keyboard-selector

<td data-keyboard-selector="button">
    <button>b1</button>
    <button>b2</button>
</td>

The cell won't be focused but directly the buttons

Examples

You'll find more examples extracted from the wai aria guide

Contribute

Tests

npm test or yarn test

Issues

reproducible bugs only.

Licence

MIT