Navigability

A Lit controller for the current item of a composite widget, moved by arrow keys, Home, End, paging and typeahead.

Installation

npm install @3mo/navigability

import { NavigabilityController } from '@3mo/navigability'

Examples

• Default — Tab in, then the arrows move, Home and End jump and PageUp and PageDown page.
• Wrapping — wrap connects the ends, so ↓ on the last person lands on the first.
• Typeahead — typeahead moves to the next item whose text starts with what was typed.
• Disabled Items — Disabled items keep their place in the order but are stepped over.
• Active Descendant — focus: 'activedescendant' keeps focus in the input, which keeps its caret keys.

API

Exports

| Name | Kind | Description | | --- | --- | --- | | NavigabilityController | class | The current item of a composite widget, kept apart from selection and from focus. | | NavigabilityElement | interface | An item's element, or the shim a virtualizer hands out for one it has not rendered. | | NavigabilityFocus | type | roving moves DOM focus onto the current item; activedescendant keeps it on the keyboard target and announces the current item through aria-activedescendant. |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH