The
keyboardNavigation function enhances keyboard accessibility for a group of elements within a container, allowing users to navigate through them using arrow keys, Home, and End keys. Purpose
- To improve accessibility for keyboard users
- To enable easy navigation through a set of interactive elements (like menu items or buttons)
- To support different navigation directions (vertical, horizontal, or both)
Usage
import { keyboardNavigation } from '@flexilla/utilities';
const { make, destroy } = keyboardNavigation({
containerElement: '#menu',
targetChildren: 'a, button',
direction: 'all'
});
// Enable keyboard navigation
make();
// Disable keyboard navigation when no longer needed
destroy();Options
containerElement
The container element or selector that wraps the items you want to manage.
targetChildren
The focusable items to navigate between. This can be a selector string or an array of elements.
direction
Controls which arrow keys are handled.
-
up-down -
left-right -
all
Lifecycle
keyboardNavigation() returns two methods: -
make()to attach the keyboard listeners -
destroy()to remove them again
That makes it a good fit for framework lifecycle hooks where you want setup on mount and cleanup on unmount.
Examples
The dropdown components use this for keyboard navigation. See it here