react-use-focus-trap
Everytime when people implement Modals...
...People forget that pro users as well as users that are permanently or temporarily restricted will use other inputs than the mouse - e.g. a keyboard.
Now tabbing through a modal most often leads to the fact that the focus goes below the Modal and then good luck finding your way back. A horror show.
That is why you can simply add this hook and you should be good of with the most basic thing you can do: Locking into the modal while it is open.
Installation
npm i react-use-focus-trap
Usage
import React from 'react';
import { useFocusTrap } from 'react-use-focus-trap';
export function NiceModal() {
const [ trapRef ] = useFocusTrap();
return <div class="my-weird-modal" ref={trapRef}>Foobar</div>;
}
An extremely helpful React Hook to trap the focusable elements / Hello Modals! Hello a11y! Any improvement / feedback is ALWAYS appreciated!
2 Mar 29, 2022
37 Nov 22, 2022
2.8k Jan 5, 2023
51 Dec 13, 2022
4 Nov 28, 2022
22 Dec 15, 2022
12 Sep 8, 2022
1 Dec 22, 2021
2 May 15, 2022
1 Dec 25, 2021
34 Dec 18, 2022
7 Nov 16, 2022
37 Oct 16, 2022
12 Nov 1, 2022
18.2k Jan 8, 2023
9 Sep 17, 2022
21.7k Dec 30, 2022
32.4k Dec 29, 2022