@frankhoodbs/a11y-support

A11y Support

A collection of JavaScript utilities designed to enhance web accessibility and improve user experience. This module leverages powerful features from the ally.js library, focus-trap, and body-scroll-lock.

Features

• Focus management:

  • Directly focus on a specific element.
  • Determine if a given element is the currently active one.
  • Quickly query focusable elements.
  • Trap user focus within a specific element.
  • Focus on the first element within a given context.

• Scroll management:

  • Lock the body's scroll, while keeping the designated target element scrollable.
  • Unlock the body's scroll. If a target element is provided, it re-enables scrolling for that specific element. If no target is provided, it clears all body scroll locks.

• Utilities:

  • Convert boolean values to their string representation ('true' or 'false').

Usage

Here are some of the primary utilities and their descriptions:

Focus Management

• elementFocus(element: HTMLElement): Focuses the given element.

• isActiveElement(element: HTMLElement): Checks if the given element is currently active.

• createFocusTrap(element: HTMLElement): Creates a focus trap for the given element, which is useful for modals and other UI components where trapping user focus is essential.

• firstElementFocus(context: string | HTMLElement): Focuses on the first element within the provided context.

Scroll Management

• lockBodyScroll(target: HTMLElement): Locks the body's scroll while allowing the specified target element to remain scrollable.

• unlockBodyScroll(target?: HTMLElement): Unlocks the body's scroll. If a target element is provided, it re-enables scrolling for that particular element. If no target is specified, it clears all body scroll locks.

Utilities

• boolToString(value: boolean): Converts a boolean value to its string representation ('true' or 'false').

Dependencies

• focus-trap
• body-scroll-lock