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.tagName !== 'INPUT' ||
13 (node as HTMLInputElement).type !== 'hidden') &&
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 | EventTarget | null,
28 node: Element | EventTarget | null
29) =>
30 !!(
31 node &&
32 owner &&
33 (owner === node || (owner as Element).contains(node as Element))
34 );