Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
kitten.sh
1/** Returns a given tab index for an element, defaulting to zero. */
2export const getTabIndex = (node: Element): number => {
3 const index = parseInt(node.getAttribute('tabindex')!, 10);
4 return (
5 (index === index && !(node as HTMLElement).isContentEditable && index) || 0
6 );
7};
8
9/** Returns whether an element is visible in the context of focusability. */
10export const isVisible = (node: Element): boolean =>
11 !!(
12 (node as HTMLElement).offsetWidth &&
13 (node as HTMLElement).offsetHeight &&
14 node.getClientRects().length &&
15 getComputedStyle(node).visibility !== 'hidden'
16 );
17
18/** Returns whether an element accepts text input. */
19export const isInputElement = (node: Element): boolean =>
20 !!(
21 node.tagName === 'INPUT' ||
22 node.tagName === 'TEXTAREA' ||
23 (node as HTMLElement).isContentEditable
24 );
25
26export const contains = (
27 owner: Element | null,
28 node: Element | EventTarget | null
29) => !!(node && owner && (owner === node || owner.contains(node as Element)));