@frankhoodbs/a11y-support
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

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

  1. 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.
  2. 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.
  3. 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

Readme

Keywords

none

Package Sidebar

Install

npm i @frankhoodbs/a11y-support

Weekly Downloads

43

Version

2.0.3

License

ISC

Unpacked Size

5.05 kB

Total Files

4

Last publish

Collaborators

  • giando110188
  • frankhood-info
  • skill83
  • m.brandonisio