@finn-no/dom-focus-lock-fixed

    1.0.6 • Public • Published

    dom-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 accessibility will be shitty.

    How to use

    Just include script

    <script src="http://unpkg.com/dom-focus-lock"></script>

    Or require it from JS

    import focusLock from 'dom-focus-lock'

    Then, activate the lock on desired node

    focusLock.on(domNode);
    //.....
    focusLock.off(domNode);

    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.

    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 or vue-focus-lock

    Licence

    MIT

    Install

    npm i @finn-no/dom-focus-lock-fixed

    DownloadsWeekly Downloads

    4

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • boksasp
    • finn-no-owner
    • ivarconr
    • cmtegner
    • trygve
    • torarnek
    • digitalsadhu
    • nicolayr
    • pearofducks
    • tormoder
    • snorrenygaard
    • benjaminakar