ToleFocus

  
> JavaScript Framework agnostic Focus Manager coded in TypeScript

ToleFocus is a small library to manage focus on JavaScript web applications. ToleFocus use ES6 methods, like array.findIndex, and require some polyfill like core-js in order to work in old browsers, like IE.

ToleFocus is highly inspired on Angular Focus Manager coded by Rob Tylor.

Installation

```
npm install tolefocus --save
``

Usage

To enable the focus manager you have to import focusManager from tolefocus module and call enable method.

`` javascript
import {focusManager} from "tolefocus";
focusManager.enable();
``

This load the content of body tag searching for ToleFocus attributes.

You can enable the built in DOM observer witch use MutationObserver in order to detect the DOM changes.


`` javascript
import {focusManager, focusObserver} from "tolefocus";
focusManager.enable();
focusObserver.enable();
``

ToleFocus handles by default the TAB key in the common focusables controls and sends focus to the next or previous control.

$3

You can set the focus order:

`` html



``

Focus order is zero based, you can set negative focus order to any element, the negative focus order are pushed to the first positions.

`` html








``

$3

You can create focus groups where each element can to have his own focus-order in the group.

`` html

``

$3

You can control the group loopback, you can set the head and tail behaivor. When behaivor is "stop" the focus doesn't go to the next element, the foucus stops in the last or first element. When behaivor is "loop" the focus go from last to first element in the group or from the first to the end element.

`` html

``

$3

You can send focus to other controls like div or spans, you have to set focus-order attribute.

`` html