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 &&
6 !(node as HTMLElement).isContentEditable &&
7 index
8 ) || 0;
9};
10
11/** Returns whether an element is visible in the context of focusability. */
12export const isVisible = (node: Element): boolean => !!(
13 (node as HTMLElement).offsetWidth &&
14 (node as HTMLElement).offsetHeight &&
15 node.getClientRects().length &&
16 getComputedStyle(node).visibility !== 'hidden'
17);
18
19/** Returns whether an element accepts text input. */
20export const isInputElement = (node: Element): boolean => !!(
21 node.tagName === 'INPUT'
22 || node.tagName === 'TEXTAREA'
23 || (node as HTMLElement).isContentEditable
24);
25
26export const contains = (owner: Element | null, node: Element | EventTarget | null) =>
27 !!(node && owner && (owner === node || owner.contains(node as Element)));