What is react-focus-lock?
The react-focus-lock package is a React component designed to trap focus within a DOM element. It is commonly used to ensure that keyboard users can navigate modal dialogs and other pop-up UI elements without accidentally interacting with the rest of the page.
What are react-focus-lock's main functionalities?
Focus Trapping
This feature traps the focus within the modal dialog. When the modal is open, the focus cycles through the interactive elements inside the modal and does not move to the background elements.
{"import React from 'react';\nimport FocusLock from 'react-focus-lock';\n\nconst Modal = ({ onClose }) => (\n <FocusLock>\n <div className='modal'>\n <button onClick={onClose}>Close</button>\n {/* other modal contents */}\n </div>\n </FocusLock>\n);"}
AutoFocus and Return Focus
This feature automatically focuses the first focusable element within the FocusLock on mount and returns the focus to the initially focused element when the FocusLock is unmounted.
{"import React from 'react';\nimport FocusLock from 'react-focus-lock';\n\nconst Modal = ({ onClose }) => (\n <FocusLock autoFocus={true} returnFocus={true}>\n <div className='modal'>\n <button onClick={onClose}>Close</button>\n {/* other modal contents */}\n </div>\n </FocusLock>\n);"}
Focus Grouping
This feature allows grouping of focusable elements. Focus can be moved inside a group, and it will be contained within the elements of that group.
{"import React from 'react';\nimport FocusLock, { MoveFocusInside } from 'react-focus-lock';\n\nconst Group = () => (\n <div>\n <MoveFocusInside>\n <button>Button1</button>\n </MoveFocusInside>\n <MoveFocusInside>\n <button>Button2</button>\n </MoveFocusInside>\n </div>\n);\n\nconst App = () => (\n <FocusLock group='group1'>\n <Group />\n </FocusLock>\n);"}
Other packages similar to react-focus-lock
react-modal
react-modal is a package that provides accessible modals for React applications. It includes the ability to trap focus within the modal, similar to react-focus-lock, but it is specifically designed for modal dialog creation and management.
react-aria-modal
react-aria-modal is a fully accessible React modal component that manages focus. It also traps focus within the modal, similar to react-focus-lock, and provides a comprehensive solution for creating accessible modals with ARIA attributes.
react-trap-focus
react-trap-focus is a package that provides focus trapping functionality. It is similar to react-focus-lock in that it traps focus within a specified element, but it may have different implementation details or additional features.
react-focus-lock
It is a trap! We got your focus and will not let him out!
This is a small, but very useful for:
- Modal dialogs. You can not leave it with "Tab", ie tab-out.
- Focused tasks. It will aways brings you back.
You have to use it in every modal dialog, or you a11y
will be shitty.
How to use
Just wrap something with focus lock, and focus will be moved inside
on mount.
import FocusLock from 'react-focus-lock';
const JailForAFocus = ({onClose}) => (
<FocusLock>
You can not leave this form
<button onClick={onClick} />
</FocusLock>
);
Demo - https://codesandbox.io/s/72prk69z3j
WHY?
From MDN Article about accessible dialogs:
- The dialog must be properly labeled
- Keyboard focus must be managed correctly
This one is about managing the focus.
I'v got a good article about focus management, dialogs and WAI-ARIA.
Behavior
- It will always keep focus inside Lock.
- It will cycle forward then you press Tab.
- It will cycle in reverse direction on Shift+Tab.
- It will do it using browser tools, not emulation.
- It will handle positive tabIndex inside form.
- It will prevent any jump outside, returning focus to the last element.
You can use nested Locks or have more than one Lock on the page.
Only last
, or deepest
one will work. No fighting.
API
FocusLock has only 3 props, 2 of them you will never use(I hope):
disabled
, to disable(enable) behavior without altering the tree.returnFocus
, to return focus into initial position on unmount(not disable).
This is expected behavior for Modals, but it is better to implement it by your self.
Autofocus
As long you cannot use autoFocus
prop -
cos "focusing" should be delayed to Trap activation, and autoFocus will effect immediately -
Focus Lock provide a special API for it
- prop
data-autofocus
on the element. AutoFocusInside
component, as named export of this library.
import FocusLock, { AutoFocusInside } from 'focus-lock';
<FocusLock>
<button>Click</button>
<AutoFocusInside>
<button>will be focused</button>
</AutoFocusInside>
</FocusLock>
<FocusLock>
<button>Click</button>
<button data-autofocus>will be focused</button>
</FocusLock>
If there is more than one auto-focusable target - the first will be selected.
If it is a part of radio group, and rest of radio group element are also autofocusable(just put them into AutoFocusInside) -
checked one fill be selected.
See example for sandboxed mode - https://codesandbox.io/s/jllj5kr6ov
How it works
Everything thing is simple - react-focus-lock just dont left focus left boundaries of component, and
do something only if escape attempt was succeeded.
It is not altering tabbing behavior at all. We are good citizens.
Not only for React
Uses focus-lock under the hood. It does also provide support for Vue.js and Vanilla DOM solutions
Licence
MIT