houser-js-utils
Version:
A comprehensive collection of TypeScript utility functions for common development tasks including array manipulation, string processing, date handling, random number generation, validation, and much more.
272 lines (271 loc) • 8.25 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const AccessibilityUtils = {
/**
* Gets the ARIA described by attribute of an element
* @param element - The DOM element to check
* @returns The value of aria-describedby attribute or null if not set
* @example
* ```typescript
* const element = document.querySelector('.input');
* const describedBy = AccessibilityUtils.getAriaDescribedBy(element);
* ```
*/
getAriaDescribedBy(element) {
return element.getAttribute("aria-describedby");
},
/**
* Sets the ARIA described by attribute of an element
* @param element - The DOM element to modify
* @param describedBy - The ID(s) of the element(s) that describe this element
* @example
* ```typescript
* const input = document.querySelector('.input');
* const helpText = document.querySelector('.help-text');
* AccessibilityUtils.setAriaDescribedBy(input, helpText.id);
* ```
*/
setAriaDescribedBy(element, describedBy) {
element.setAttribute("aria-describedby", describedBy);
},
/**
* Gets the ARIA expanded state of an element
* @param element - Element to check
* @returns ARIA expanded state
*/
getAriaExpanded(element) {
const expanded = element.getAttribute("aria-expanded");
return expanded === null ? null : expanded === "true";
},
/**
* Sets the ARIA expanded state of an element
* @param element - Element to modify
* @param expanded - ARIA expanded state to set
*/
setAriaExpanded(element, expanded) {
element.setAttribute("aria-expanded", expanded.toString());
},
/**
* Gets the ARIA hidden state of an element
* @param element - Element to check
* @returns ARIA hidden state
*/
getAriaHidden(element) {
const hidden = element.getAttribute("aria-hidden");
return hidden === null ? null : hidden === "true";
},
/**
* Sets the ARIA hidden state of an element
* @param element - Element to modify
* @param hidden - ARIA hidden state to set
*/
setAriaHidden(element, hidden) {
element.setAttribute("aria-hidden", hidden.toString());
},
/**
* Gets the ARIA invalid state of an element
* @param element - Element to check
* @returns ARIA invalid state
*/
getAriaInvalid(element) {
const invalid = element.getAttribute("aria-invalid");
return invalid === null ? null : invalid === "true";
},
/**
* Sets the ARIA invalid state of an element
* @param element - Element to modify
* @param invalid - ARIA invalid state to set
*/
setAriaInvalid(element, invalid) {
element.setAttribute("aria-invalid", invalid.toString());
},
/**
* Gets the ARIA label of an element
* @param element - Element to check
* @returns ARIA label
*/
getAriaLabel(element) {
return element.getAttribute("aria-label");
},
/**
* Sets the ARIA label of an element
* @param element - Element to modify
* @param label - ARIA label to set
*/
setAriaLabel(element, label) {
element.setAttribute("aria-label", label);
},
/**
* Gets the ARIA required state of an element
* @param element - Element to check
* @returns ARIA required state
*/
getAriaRequired(element) {
const required = element.getAttribute("aria-required");
return required === null ? null : required === "true";
},
/**
* Sets the ARIA required state of an element
* @param element - Element to modify
* @param required - ARIA required state to set
*/
setAriaRequired(element, required) {
element.setAttribute("aria-required", required.toString());
},
/**
* Gets the ARIA role of an element
* @param element - Element to check
* @returns ARIA role
*/
getAriaRole(element) {
return element.getAttribute("role");
},
/**
* Sets the ARIA role of an element
* @param element - Element to modify
* @param role - ARIA role to set
*/
setAriaRole(element, role) {
element.setAttribute("role", role);
},
/**
* Removes focus from an element
* @param element - Element to blur
*/
blurElement(element) {
if (element instanceof HTMLElement) {
element.blur();
}
},
/**
* Sets focus to an element
* @param element - Element to focus
*/
focusElement(element) {
if (element instanceof HTMLElement) {
element.focus();
}
},
/**
* Sets focus to the first focusable element in a container
* @param container - Container element
*/
focusFirstElement(container) {
const focusableElements = this.getFocusableElements(container);
if (focusableElements.length > 0) {
focusableElements[0].focus();
}
},
/**
* Sets focus to the last focusable element in a container
* @param container - Container element
*/
focusLastElement(container) {
const focusableElements = this.getFocusableElements(container);
if (focusableElements.length > 0) {
focusableElements[focusableElements.length - 1].focus();
}
},
/**
* Sets focus to the next focusable element
* @param currentElement - Current element
*/
focusNextElement(currentElement) {
const focusableElements = this.getFocusableElements(document.body);
const currentIndex = focusableElements.indexOf(currentElement);
if (currentIndex < focusableElements.length - 1) {
focusableElements[currentIndex + 1].focus();
}
},
/**
* Sets focus to the previous focusable element
* @param currentElement - Current element
*/
focusPreviousElement(currentElement) {
const focusableElements = this.getFocusableElements(document.body);
const currentIndex = focusableElements.indexOf(currentElement);
if (currentIndex > 0) {
focusableElements[currentIndex - 1].focus();
}
},
/**
* Gets all focusable elements within a container
* @param container - Container element
* @returns Array of focusable elements
*/
getFocusableElements(container) {
const elements = container.querySelectorAll("*");
return Array.from(elements).filter((element) => this.isFocusable(element));
},
/**
* Gets the current focus element
* @returns Currently focused element
*/
getFocusedElement() {
return document.activeElement;
},
/**
* Checks if an element is focusable
* @param element - Element to check
* @returns True if element is focusable
*/
isFocusable(element) {
if (!(element instanceof HTMLElement)) {
return false;
}
if (element.tabIndex < 0) {
return false;
}
if ("disabled" in element && element.disabled) {
return false;
}
switch (element.tagName.toLowerCase()) {
case "a":
case "button":
case "input":
case "select":
case "textarea":
return true;
default:
return false;
}
},
/**
* Traps focus within a container element, typically used for modals or dialogs
* @param container - The container element to trap focus within
* @returns A function that removes the focus trap when called
* @example
* ```typescript
* const modal = document.querySelector('.modal');
* const removeTrap = AccessibilityUtils.trapFocus(modal);
*
* // Later, when the modal is closed:
* removeTrap();
* ```
*/
trapFocus(container) {
const focusableElements = this.getFocusableElements(container);
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
const handleKeyDown = (event) => {
if (!(event instanceof KeyboardEvent) || event.key !== "Tab") {
return;
}
if (event.shiftKey) {
if (document.activeElement === firstFocusableElement) {
event.preventDefault();
lastFocusableElement.focus();
}
} else {
if (document.activeElement === lastFocusableElement) {
event.preventDefault();
firstFocusableElement.focus();
}
}
};
container.addEventListener("keydown", handleKeyDown);
return () => container.removeEventListener("keydown", handleKeyDown);
}
};
exports.AccessibilityUtils = AccessibilityUtils;
//# sourceMappingURL=AccessibilityUtils.js.map