Nomenclature Predictably Misunderstood

    @pdw.io/focusmanager

    0.0.3 • Public • Published

    FocusManager

    DOCS

    Installation

    npm install --save @pdw.io/focusmanager or yarn add @pdw.io/focusmanager

    Concept

    A utility class that aides with computational focus. The main motivation for creating such a module comes from inert and its inconvenient way of intentional "focus-trapping" for e.g a dialog or drawer. On several projects I found myself creating an array of different sections of the site only to give them an attribute. Hopefully this class helps with that. Alongside that it has some common a11y functions.

    <nav data-focus-section="topbar"></nav>
    <main data-focus-section="main"></main>
    <dialog data-focus-section="mydialog"></dialog>
    import FocusManager from 'focusmanager';
    const fm = new FocusManager();
    fm.rejectFocusToAllSections();
    fm.allowFocusToSection('mydialog');

    Utilities

    There are several utility functions available that could proof useful in your app.

    import * as utilities from '@pdw.io/focusmanager/utilities';
    // Or treeshaking `import {ariaHidden} from '@pdw.io/focusmanager/utilities';`
    
    utilities.ariaHidden(myElement, true);

    DOCS

    Install

    npm i @pdw.io/focusmanager

    DownloadsWeekly Downloads

    4

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    951 kB

    Total Files

    33

    Last publish

    Collaborators

    • pdw.io