-
Notifications
You must be signed in to change notification settings - Fork 9
/
FocusTrap.tsx
94 lines (83 loc) · 2.67 KB
/
FocusTrap.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useRef, type ReactElement, useLayoutEffect } from "react";
function queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {
// Focusable, interactive elements that could possibly be in children
const selector = [
"a[href]",
"area[href]",
"input:not([disabled])",
"select:not([disabled])",
"textarea:not([disabled])",
"button:not([disabled])",
"iframe",
"object",
"embed",
'[tabindex="-1"]',
'[tabindex="0"]',
"[contenteditable]",
"audio[controls]",
"video[controls]",
"summary",
].join(",");
return el.querySelectorAll(selector);
}
const focusElement = (el?: HTMLElement) => {
if (el && typeof el.focus === "function") {
el.focus();
}
};
/**
* FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.
*/
export default function FocusTrap({
children,
}: {
children?: ReactElement | null;
}): ReactElement {
const elRef = useRef<HTMLDivElement | null>(null);
const previouslyFocusedElRef = useRef<HTMLElement | null>(null);
useLayoutEffect(() => {
const { current: element } = elRef;
// Focus the first child element among all the focusable, interactive elements within `children`
const focusFirstChild = () => {
const withinIframe = window !== window.parent;
if (element && !withinIframe) {
focusElement(queryFocusableAll(element)[0]);
}
};
const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {
if (
!element ||
(event.target instanceof Node && element.contains(event.target))
) {
return;
}
// This prevents stack overflow when multiple FocusTraps are rendered
if (
event.target instanceof Element &&
event.target.closest('[data-testid="syntax-focus-trap"]') !== null
) {
return;
}
event.stopPropagation();
event.preventDefault();
focusFirstChild();
};
// If an element has focus currently, keep a reference to that element
previouslyFocusedElRef.current = document.activeElement as HTMLElement;
focusFirstChild();
document.addEventListener("focus", handleFocus, true);
return function cleanup() {
const { current: previouslyFocusedEl } = previouslyFocusedElRef;
document.removeEventListener("focus", handleFocus, true);
// If we previously stored a reference to a focused element, return focus to that element
if (previouslyFocusedEl) {
focusElement(previouslyFocusedEl);
}
};
}, [elRef, previouslyFocusedElRef]);
return (
<div data-testid="syntax-focus-trap" ref={elRef}>
{children}
</div>
);
}