Skip to content
A utility class that aides with computational focus.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.repository
docs
.gitignore initial commit Oct 10, 2018
LICENSE Initial commit Oct 9, 2018
README.md
documentation.css feat(docs): changed destination Oct 10, 2018
documentation.json
index.js initial commit Oct 10, 2018
package-lock.json feat(*): deprecation notice Nov 10, 2019
package.json feat(*): deprecation notice Nov 10, 2019
utilities.js feat(baselogic): boolean shenanigans Oct 10, 2018

README.md

FocusManager

NOTE: This package is made redundant by the new proposal for document.blockingElements. Please do not use this library, instead use blocking-elements.



FocusManager, by Pim de Wit

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

You can’t perform that action at this time.