Navigation Back to home

FocusManager

A focus management helper for moving and restoring focus across interactive DOM regions.

Import
the javascript logo
import { FocusManager } from "@schukai/monster/source/dom/focusmanager.mjs";
Source
the git logo
Package
the npm logo
Since
1.25.0

FocusManager stores, restores and moves focus across interactive regions. Use it for overlays, dialogs, menus or custom controls where focus must return to the right trigger after temporary interaction.

That makes it an accessibility helper, not just a convenience wrapper. Correct focus restoration is part of a stable keyboard experience.

Store And Restore Focus Inside A Dialog Flow

import { FocusManager } from "@schukai/monster/source/dom/focusmanager.mjs";

const output = document.getElementById("focus-output");
const trigger = document.getElementById("focus-trigger");
const first = document.getElementById("focus-first");
const second = document.getElementById("focus-second");
const manager = new FocusManager();

trigger.addEventListener("click", () => {
    manager.storeFocus();
    manager.focus(first);
    output.textContent = "Focus stored and moved to the first field.";
});

second.addEventListener("focus", () => {
    output.textContent = "Focus reached the second field.";
});

first.addEventListener("keydown", (event) => {
    if (event.key !== "Enter") {
        return;
    }

    manager.focus(second);
});

second.addEventListener("keydown", (event) => {
    if (event.key !== "Escape") {
        return;
    }

    manager.restoreFocus();
    output.textContent = "Original trigger focus restored.";
});
Open in playground

Exported

FocusManager

Derived from

BaseWithOptions

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the BaseWithOptions.

Option
Type
Default
Description
document
htmldocument
undefined
the document object into which the node is to be appended

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the BaseWithOptions.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the BaseWithOptions.

Constructor

constructor(options)
Parameters
  • options {object|undefined}: options

Structural methods

getActive()
Returns
  • {Element}
getFocusable(query)
Parameters
  • query {string|undefined}: query
Returns
  • {array}
Throws
  • {TypeError} value is not an instance of
Select all elements that can be focused

Static methods

[instanceSymbol]()2.1.0
Returns
  • {symbol}
This method is called by the instanceof operator.

Other methods

focus(element,preventScroll)
Parameters
  • element {node}: element
  • preventScroll {boolean}: preventScroll
Returns
  • {Monster.DOM.FocusManager}
Throws
  • {TypeError} value is not an instance of
focusNext(query)
Parameters
  • query {string}: query
Returns
  • {Monster.DOM.FocusManager}
focusPrev(query)
Parameters
  • query {string}: query
Returns
  • {Monster.DOM.FocusManager}
restoreFocus()
Returns
  • {Monster.DOM.FocusManager}
The last focus on the stack is set again
storeFocus()
Returns
  • {Monster.DOM.FocusManager}
Remembers the current focus on a stack. Several focus can be stored.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.