FocusManager

Overview

FocusManager is a class within MonsterJS designed to manage and manipulate focus within a document. It provides methods to store, restore, and shift focus among elements, facilitating enhanced keyboard navigation and focus management in web applications.

Key Features

  • Focus Storage: Allows storing the current focus state and retrieving it later, which is particularly useful for modal interactions or complex UI transitions.
  • Focus Navigation: Enables moving focus to the next or previous focusable element within a context, supporting accessible keyboard navigation.
  • Focus Control: Offers methods to programmatically focus or query focusable elements, enhancing dynamic interaction and responsiveness in user interfaces.

Methods and Properties

Constructor

Initializes the focus manager with optional configurations, setting up the internal stack to track focus states.

Instance Methods

  • storeFocus(): Stores the current focus in the stack.
  • restoreFocus(): Restores the most recently stored focus state from the stack.
  • focus(element, preventScroll): Focuses on the specified element, optionally preventing scrolling into view.
  • getActive(): Returns the currently focused element in the document.
  • getFocusable(query): Retrieves all focusable elements within the specified context or document, optionally filtered by a query selector.
  • focusNext(query): Moves focus to the next focusable element, optionally filtered by a query selector.
  • focusPrev(query): Moves focus to the previous focusable element, optionally filtered by a query selector.

Properties

  • defaults: Returns the default configuration for the focus manager, including the document and context.

Examples

Creating and using a FocusManager instance:

const focusManager = new FocusManager();

// Store the current focus before opening a modal
focusManager.storeFocus();

// ... open modal and interact with it ...

// Restore focus after closing the modal
focusManager.restoreFocus();

Navigating focus programmatically:

// Focus the next focusable element in the document
focusManager.focusNext();

// Focus the previous input element
focusManager.focusPrev('input');

The FocusManager class is a powerful tool for developers to enhance accessibility and user experience by providing robust focus management capabilities in web applications.