Skip to content
It is a trap! A lock for a Focus. A11y util for scoping a focus.
Vue JavaScript
Branch: master
Clone or download
Latest commit 78b195e Nov 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook backport features from react-focus-lock. fixes #1, #3, #4 May 8, 2018
src noFocusGuards prop with ability to remove tailing guard - #13 Nov 29, 2019
.babelrc setup babelrc Oct 12, 2017
.eslintrc
.gitignore initial release Sep 2, 2017
.npmignore initial release Sep 2, 2017
LICENSE Initial commit Sep 2, 2017
README.md noFocusGuards prop with ability to remove tailing guard - #13 Nov 29, 2019
package.json 1.3.2 Aug 1, 2019
webpack.config.js make it smaller Nov 12, 2018
yarn.lock fix: remove placeholder text, fixes #11 Jan 30, 2019

README.md

vue-focus-lock

It is a trap! We got your focus and will not let him out!

NPM

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.

<FocusLock>
 You can not leave this form
 <button @click="onClick" />
</FocusLock> 

Demo - https://codesandbox.io/s/l5qlpxqvnq

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

  1. It will always keep focus inside Lock.
  2. It will cycle forward then you press Tab.
  3. It will cycle in reverse direction on Shift+Tab.
  4. It will do it using browser tools, not emulation.
  5. It will handle positive tabIndex inside form.
  6. It will prevent any jump outside, returning focus to the last element.

!! this realisation will not return focus to the original place on Unlock !!

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 few props to tune behavior, all props are optional:

  • disabled, to disable(enable) behavior without altering the tree.
  • group='', named focus group for focus scattering aka combined lock targets.
  • noFocusGuards=false, disable focus guards - virtual inputs which secure tab index.

Removing Tailing Guard

FocusLock is adding Focus Guards before and after lock to remove some side effects, like page scrolling. If you want to allow user tab into address bar (only if your modal is the last tabbable element on the body), you might remove the Tailing Guard. To do this, set noFocusGuards prop to tail.

<FocusLock no-focus-guards="tail">
    ...
</FocusLock> 

How it works

Everything thing is simple - vue-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.

Licence

MIT

You can’t perform that action at this time.