jquery-roving-tabindex
jQuery collection plugin that implements one or two dimensional roving keyboard tabindex on the items of a widget.
;
Install
npm install jquery-roving-tabindex
Example - One Dimensional
HTML:
Tab 1 Tab 2 Tab 3
Execute plugin:
;
Output:
Tab 0 Tab 1 Tab 2
First down arrow key will update DOM to:
Tab 0 Tab 1 Tab 2
Next down arrow key will update DOM to:
Tab 0 Tab 1 Tab 2
To listen for roving tabindex changes:
;
Example - Two Dimensional
HTML:
123 456 789
Execute plugin:
;
Params
rovingItemsSelector
: selector that identifies the descendant collection that requires a roving tab indexoptions.activeIndex
: index of the item that receives tabindex on init (default: 0)options.autoFocus
: set focus when roving tabindex changes (default: true)options.autoInit
: set initial tabindex state (but not focus) when plugin executes (default: true)options.autoReset
: reset tabindex state when focus exits widget (default: false)options.autoWrap
: reaching end of collection will wrap back to beginning, and vice versa (default: false)options.axis
: x, y or both (default: 'both')options.disableHomeAndEndKeys
: disable HOME and END key functionality (default: false)options.isGrid
: specify two-dimensional navigation (default: false)
Triggers
rovingTabindexChange
: fired when collection's roving tabindex changes
Listens
domChange
: trigger on widget when underlying dom changes. For example, new roving items are added.
Dependencies
Development
Useful NPM task runners:
npm start
for local browser-sync development.npm test
runs tests & generates reports (see reports section below)npm run tdd
test driven development: watches code and re-tests after any changenpm run build
cleans, lints, tests and minifies
Execute npm run
to view all available CLI scripts.
CI Build
https://travis-ci.org/makeup-jquery/jquery-roving-tabindex
Code Coverage
https://coveralls.io/github/makeup-jquery/jquery-roving-tabindex?branch=master
Test Reports
Local test reports are generated under test_reports
folder.
JSDocs
Local JSDocs are generated under jsdoc
folder.