MCPcopy Create free account
hub / github.com/reactjs/react-modal / scopeTab

Function scopeTab

src/helpers/scopeTab.js:9–87  ·  view source on GitHub ↗
(node, event)

Source from the content-addressed store, hash-verified

7}
8
9export default function scopeTab(node, event) {
10 const tabbable = findTabbable(node);
11
12 if (!tabbable.length) {
13 // Do nothing, since there are no elements that can receive focus.
14 event.preventDefault();
15 return;
16 }
17
18 let target;
19
20 const shiftKey = event.shiftKey;
21 const head = tabbable[0];
22 const tail = tabbable[tabbable.length - 1];
23 const activeElement = getActiveElement();
24
25 // proceed with default browser behavior on tab.
26 // Focus on last element on shift + tab.
27 if (node === activeElement) {
28 if (!shiftKey) return;
29 target = tail;
30 }
31
32 if (tail === activeElement && !shiftKey) {
33 target = head;
34 }
35
36 if (head === activeElement && shiftKey) {
37 target = tail;
38 }
39
40 if (target) {
41 event.preventDefault();
42 target.focus();
43 return;
44 }
45
46 // Safari radio issue.
47 //
48 // Safari does not move the focus to the radio button,
49 // so we need to force it to really walk through all elements.
50 //
51 // This is very error prone, since we are trying to guess
52 // if it is a safari browser from the first occurence between
53 // chrome or safari.
54 //
55 // The chrome user agent contains the first ocurrence
56 // as the 'chrome/version' and later the 'safari/version'.
57 const checkSafari = /(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);
58 const isSafariDesktop =
59 checkSafari != null &&
60 checkSafari[1] != "Chrome" &&
61 /\biPod\b|\biPad\b/g.exec(navigator.userAgent) == null;
62
63 // If we are not in safari desktop, let the browser control
64 // the focus
65 if (!isSafariDesktop) return;
66

Callers 1

ModalPortalClass · 0.85

Calls 1

getActiveElementFunction · 0.85

Tested by

no test coverage detected