@fluentui/react-tabster

What is @fluentui/react-tabster?

@fluentui/react-tabster is a package that provides utilities for managing keyboard navigation and focus within React applications. It leverages the Tabster library to enhance accessibility and improve user experience by offering fine-grained control over focus management.

What are @fluentui/react-tabster's main functionalities?

Focus Management

This feature allows you to create a focus trap zone, ensuring that keyboard navigation is contained within a specific area of the UI. This is useful for modal dialogs or other interactive components where you want to restrict focus.

import { createFocusTrapZone } from '@fluentui/react-tabster';

const MyComponent = () => {
  const { FocusTrapZone } = createFocusTrapZone();

  return (
    <FocusTrapZone>
      <div>
        <input type="text" placeholder="First input" />
        <button>Click me</button>
        <input type="text" placeholder="Second input" />
      </div>
    </FocusTrapZone>
  );
};

Focus Indicators

This feature provides visual indicators for focusable elements, enhancing accessibility by making it clear which element is currently focused.

import { useFocusIndicator } from '@fluentui/react-tabster';

const MyComponent = () => {
  const focusIndicatorProps = useFocusIndicator();

  return (
    <div {...focusIndicatorProps}>
      <button>Focusable Button</button>
    </div>
  );
};

Keyboard Navigation

This feature allows you to define custom keyboard navigation behaviors within your components, making it easier for users to navigate complex UIs using the keyboard.

import { createKeyboardNavigation } from '@fluentui/react-tabster';

const MyComponent = () => {
  const { KeyboardNavigation } = createKeyboardNavigation();

  return (
    <KeyboardNavigation>
      <div>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
      </div>
    </KeyboardNavigation>
  );
};

Other packages similar to @fluentui/react-tabster

react-focus-lock

react-focus-lock is a package that provides a focus lock mechanism for React components. It ensures that focus stays within a specified area, similar to the focus trap zone feature in @fluentui/react-tabster. However, it is more focused on providing a simple and lightweight solution for focus management.

react-aria

react-aria is a library that provides a comprehensive set of hooks for building accessible React components. It offers a wide range of accessibility features, including focus management, keyboard navigation, and ARIA roles and properties. Compared to @fluentui/react-tabster, react-aria provides a more extensive set of tools for building fully accessible applications.

focus-trap-react

focus-trap-react is a React wrapper for the focus-trap library, which provides a focus management solution to trap focus within a DOM node. It is similar to the focus trap zone feature in @fluentui/react-tabster but is more focused on providing a straightforward and easy-to-use API for focus trapping.

README

@fluentui/react-tabster

Tabster components for Fluent UI React

Library for focus management that leverages tabster.

The provider needs to be wrapped around your application:

<TabsterProvider>{children}</TabsterProvider>

The API currently only supports declarative data-* attributes that are returned using the exported react hooks:

const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;

const ArrowNavigationExample: React.FC = ({ children }) => {
  const attrs = useArrowNavigationGroup({ circular: true });

  return (
    <div {...attrs}>
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
    </div>
  );
};

const App: React.FC = () => {
  return (
    <TabsterProvider>
      <ArrowNavigationExample />
    </TabsterProvider>
  );
};