@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

Experimental library for focus management that leverages tabster.

These library is not production-ready and should never be used in product. This space is useful for testing new features whose APIs might change before final release.

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>
  );
};