https://github.com/pimdewit/focusmanager

A utility class that aides with computational focus.
https://github.com/pimdewit/focusmanager

a11y accessibility focus inert manager pdw

Last synced: about 1 month ago
JSON representation

A utility class that aides with computational focus.

• Host: GitHub
• URL: https://github.com/pimdewit/focusmanager
• Owner: pimdewit
• License: mit
• Created: 2018-10-09T15:37:16.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-29T14:26:57.000Z (over 1 year ago)
• Last Synced: 2024-04-25T01:21:38.027Z (7 months ago)
• Topics: a11y, accessibility, focus, inert, manager, pdw
• Language: JavaScript
• Size: 1000 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# FocusManager

**NOTE: This package is made redundant by the new proposal for `document.blockingElements`. Please do not use this library, instead use [`blocking-elements`](https://github.com/PolymerLabs/blocking-elements).**

---

---

---

![FocusManager, by Pim de Wit](/.repository/focus-manager.svg)

**[DOCS](https://pimdewit.github.io/focusmanager)**

## 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.

   

```html

```

```javascript

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.

```javascript

import * as utilities from '@pdw.io/focusmanager/utilities';

// Or treeshaking `import {ariaHidden} from '@pdw.io/focusmanager/utilities';`

utilities.ariaHidden(myElement, true);

```

**[DOCS](https://pimdewit.github.io/focusmanager)**