Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theKashey/dom-focus-lock
It's a Trap! A11y util for scoping a focus.
https://github.com/theKashey/dom-focus-lock
Last synced: about 2 months ago
JSON representation
It's a Trap! A11y util for scoping a focus.
- Host: GitHub
- URL: https://github.com/theKashey/dom-focus-lock
- Owner: theKashey
- License: mit
- Created: 2017-09-04T23:00:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-11-13T04:38:11.000Z (almost 2 years ago)
- Last Synced: 2024-07-10T23:45:34.762Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 60
- Watchers: 3
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dom-focus-lock
It is a trap! We got your focus and will not let him out!
[](https://nodei.co/npm/dom-focus-lock/)
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 accessibility will be shitty.
# How to use
Just include script
```html
```
Or require it from JS
```js
import focusLock from 'dom-focus-lock'
```
Then, activate the lock on desired node
```js
focusLock.on(domNode);
//.....
focusLock.off(domNode);
```
# Why?
From [MDN Article about accessible dialogs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role):
- 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](https://medium.com/@antonkorzunov/its-a-focus-trap-699a04d66fb5).
# Behavior
0. It will always keep focus inside Lock.
1. It will cycle forward then you press Tab.
2. It will cycle in reverse direction on Shift+Tab.
3. It will do it using _browser_ tools, not emulation.
4. It will handle positive tabIndex inside form.
5. 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.
# How it works
Everything is simple - dom-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 using a vanilla JS?
Try [react-focus-lock](https://github.com/theKashey/react-focus-lock) or [vue-focus-lock](https://github.com/theKashey/vue-focus-lock)
# Licence
MIT