@chakra-ui/focus-lock

What is @chakra-ui/focus-lock?

@chakra-ui/focus-lock is a utility package for managing focus within a specific part of the DOM. It is particularly useful for creating accessible modal dialogs, popovers, and other components that require focus to be trapped within a certain area.

What are @chakra-ui/focus-lock's main functionalities?

Focus Lock

This feature ensures that focus is trapped within the modal component, preventing users from tabbing out of the modal.

import { FocusLock } from '@chakra-ui/focus-lock';

function Modal() {
  return (
    <FocusLock>
      <div>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}

Auto Focus

This feature automatically focuses the first focusable element within the FocusLock component when it is rendered.

import { FocusLock } from '@chakra-ui/focus-lock';

function Modal() {
  return (
    <FocusLock autoFocus>
      <div>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}

Persistent Focus

This feature ensures that focus remains within the FocusLock component even if the user tries to click outside of it.

import { FocusLock } from '@chakra-ui/focus-lock';

function Modal() {
  return (
    <FocusLock persistentFocus>
      <div>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}

Other packages similar to @chakra-ui/focus-lock

react-focus-lock

react-focus-lock is a popular package for managing focus within a specific part of the DOM. It offers similar functionality to @chakra-ui/focus-lock, including focus trapping and auto-focusing elements. It is a more general-purpose solution and can be used with any React component.

focus-trap-react

focus-trap-react is another package that provides focus management for React components. It is built on top of the focus-trap library and offers features like focus trapping, auto-focusing, and persistent focus. It is highly configurable and can be used in a variety of scenarios.

README

Focus Lock

A React component that traps focus within an element. It is useful for modal dialogs and popovers.