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
.
-
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').
Here are some of the primary utilities and their descriptions:
-
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.
-
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.
-
boolToString(value: boolean)
: Converts a boolean value to its string representation ('true' or 'false').