@pdw.io/focusmanager

A utility class that aides with computational focus.

Usage no npm install needed!

<script type="module">
  import pdwIoFocusmanager from 'https://cdn.skypack.dev/@pdw.io/focusmanager';
</script>

README

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