A simple HTML web component that implements the roving tabindex pattern for building accessible menus and grids.
npm install roving-tabindexA simple HTML web component that implements the roving tabindex pattern for building accessible menus and grids.
Wrap it around some markup and give it a selector to determine which elements become navigable!
``html`
works especially well as progressive enhancement on menus that are already keyboard navigable with the tab key. It also works well in JavaScript framework apps, letting you easily create keyboard navigable toolbars and menus without managing state or focus yourself. Because it's a web component, it works with every JavaScript framework.
The easiest way to get started with is by adding a
`
It defines its custom element on import using the tag name roving-tabindex, so you can use it in your HTML with no further code!
Read on for more in-depth installation instructions.
is a dependency-free library.
You can install from npm:
`sh`
npm install roving-tabindex
Then just import it within your app:
`js`
import "roving-tabindex";
You can also import it from a CDN without installing anything:
`html`
Finally, you can "vendor" it by downloading roving-tabindex.js and copying it into your codebase.
`js`
This might not be the most popular installation method, but it's my favorite. It's the reason that is a single plain JavaScript file with no dependencies: it will work in any frontend web project, with any framework and any build system (or none at all)!
To use , just wrap it around the elements for which you want arrow key navigation. Use the selector attribute to determine which descendant elements should be included.
`html`
Make sure you set WAI-ARIA-related properties as appropriate. For example, the previous demo implements keyboard navigation described in the toolbar pattern, but doesn't manage the role and aria-label attributes for you.
By default, the left/up and right/down arrow keys move forward and backward in the list, respectively, but you can set the direction attribute to "horizontal" or "vertical" to use only the corresponding set of arrow keys:
`html`
can also be used to navigate in two dimensions by setting the direction attribute to "grid" and setting the columns attribute to the number of columns.
`html
`
By default, will stop navigating once you reach the end of the list (or, in a grid, the end of the row or column). Setting the loop attribute causes it to wrap around to the other end.
By default, registers itself as that tag name upon import. That means as soon as you import it, you can start using it on the page with no additional setup required:
`html
``
If you'd rather use a different tag name, you can import it with the query string parameter ?define=tag-name, where tag-name is whatever tag name you'd like. (Note that custom element tag names must include a hyphen.)
`html``
If you'd prefer to control the registration yourself, you can import it with the query string parameter ?nodefine and use the static method define:
`html`
This will all work no matter what method you use to install