Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
1import { contains } from './element';
2import { focus } from './focus';
3
4const clickableSelectors = [
5 '[contenteditable]',
6 'input:not([type="hidden"]):not([disabled])',
7 'button:not([disabled])',
8 'select:not([disabled])',
9 'a[href]',
10].join(',');
11
12export const click = (node: Element) => {
13 const activeElement = document.activeElement;
14 if (!activeElement || contains(node, activeElement)) {
15 let target: Element | null = node;
16
17 if (node.tagName === 'LABEL') {
18 const forId = node.getAttribute('for');
19 target = forId ? document.getElementById(forId) : null;
20 }
21
22 if (!target || !node.matches(clickableSelectors)) {
23 target = node.querySelector(clickableSelectors);
24 }
25
26 ((target || node) as HTMLElement).click();
27 focus(activeElement);
28 }
29};