tabster

What is tabster?

Tabster is a JavaScript library that helps manage focus and keyboard navigation in web applications. It provides a set of utilities to create accessible and user-friendly navigation experiences, especially for users who rely on keyboard interactions.

What are tabster's main functionalities?

Focus Management

This feature allows you to manage focus within a specific root element. You can define which elements are focusable and control the focus flow within the root.

const tabster = createTabster(window);
const root = getTabsterAttribute({ root: {} });
const focusable = getTabsterAttribute({ focusable: {} });

// Apply attributes to elements
document.getElementById('rootElement').setAttribute('data-tabster', root);
document.getElementById('focusableElement').setAttribute('data-tabster', focusable);

Keyboard Navigation

This feature enables keyboard navigation within a defined area. By setting the 'mover' attribute, you can control how keyboard navigation behaves within that area.

const tabster = createTabster(window);
const mover = getTabsterAttribute({ mover: {} });

// Apply attributes to elements
document.getElementById('moverElement').setAttribute('data-tabster', mover);

Modal Management

This feature helps manage focus within modal dialogs. By setting the 'modalizer' attribute, you can ensure that focus is trapped within the modal and does not escape to the underlying content.

const tabster = createTabster(window);
const modalizer = getTabsterAttribute({ modalizer: {} });

// Apply attributes to elements
document.getElementById('modalElement').setAttribute('data-tabster', modalizer);

Other packages similar to tabster

focus-trap

Focus-trap is a library that traps focus within a DOM node. It is useful for creating accessible modals, dialogs, and other components that require focus management. Compared to Tabster, focus-trap is more specialized and simpler, focusing primarily on trapping focus within a specific area.

react-focus-lock

React-focus-lock is a React component that traps focus within a child component. It is similar to focus-trap but specifically designed for React applications. It provides a higher-level abstraction for managing focus in React components, whereas Tabster offers a more general-purpose solution.

a11y-dialog

A11y-dialog is a lightweight and accessible modal dialog library. It provides a simple API for creating accessible dialogs that manage focus and keyboard interactions. While it is more focused on dialogs, Tabster offers a broader range of focus management utilities.

README

Tabster

Tabindex on steroids.

A set of tools and concepts for making a dynamic web application properly accessible and keyboard-navigable.

https://tabster.io.

About

The way a browser and the screen readers handle a web application is evolved from the static web era. A process of making a modern dynamic web application accessible presents a number of challenges like, for example, the proper focus management between modal dialogs, popups, lists and other parts of the dynamically changing application. This project is an attempt to solve some of those challenges.

Dependencies

This project is framework-agnostic. It operates on the DOM level and has no external runtime dependencies. Though it is possible that your framework or application might have own logic to achieve similar result, in that case runtime conflicts and behavioural inconsistencies are definitely possible. At the same time, it does not do things automatically and parts of it should be explicitly enabled.

Parts

Focusable

An API for traversing focusable elements.

Deloser

When you remove, for example, a button which has focus from the DOM, the focus gets lost which is confusing for the screen reader and keyboard navigation users. Deloser is a concept which helps to automatically restore the focus when it gets lost without manually calling .focus() method from the application code.

FocusedElementState

An event and a couple of methods to track and change currently focused element.

KeyboardNavigationState

An event and a method to determine if the user is using keyboard to navigate through the application.

Groupper

Keyboard navigation for the lists should allow to avoid going through every list item when the users use Tab key (only one item of the list should be tabbable), also the arrow keys and Home/End/PageUp/PageDown keys should be handled to move between the list items. This is an API to easily make properly behaving lists.

Modalizer

When you show, for example, a modal dialog, the rest of the application might need to be excluded from the keyboard and screen reader navigation flow. Modalizer is a concept to conveniently make that possible.

Outline

When people navigate with the keyboard, the currently focused element should be properly highlighted. There is a CSS property called outline, which is unfortunately insufficient: the outline of an element gets cropped when a parent element has overflow: hidden, there is no way to limit the outline visibility to only the cases when the user is navigating with keyboard. So, we have a custom outline component which is supposed to solve both of the problems.

Contributing

Contributions are welcome (see the CONTRIBUTING file), though please keep in mind the work-in-progress proof-of-concept state. Might make sense to just observe/discuss until the thing gets stable and well-documented.

The repo now has an examples project powered by Storybook. Just run npm start

License

This project is licensed under the MIT License, see the LICENSE file for details.