key board navigation for widget implementing the [Grid pattern](https://www.w3.org/TR/wai-aria-practices/#grid)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
lib
test
.gitignore
.npmignore
LICENSE
README.md
circle.yml
index.js
package.json
rollup.config.js
yarn.lock

README.md

smart-table-keyboard

CircleCI

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