-
Notifications
You must be signed in to change notification settings - Fork 70
/
index.html
175 lines (164 loc) · 8.03 KB
/
index.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>focus-trap-react demo</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="A demo of focus-trap-react">
</head>
<body>
<main>
<h1 tabindex="0">focus-trap-react demo</h1>
<p>
<span aria-hidden="true" style="font-size:2em;vertical-align:middle;">☜</span>
<a href="https://github.com/focus-trap/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
</p>
<h2 id="defaults-heading">defaults</h2>
<p>
Default behavior: When this FocusTrap mounts (and activates), the first element in its tab order receives focus.
</p>
<div id="demo-defaults"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-defaults.js" aria-describedby="defaults-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="animated-dialog-heading">animated dialog</h2>
<p>
This focus trap will fade in when activated and fade out when deactivated. It logs a message to the
console when the trap has finished activating. Note that the fade animation needs to be written yourself,
it is not built into the library.
</p>
<div id="demo-animated-dialog"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-animated-dialog.js" aria-describedby="animated-dialog-heading">View demo source <span aria-hidden="true">>></span></a>
</p>
<h2 id="animated-trigger-heading">animated trigger</h2>
<p>
The activation button for this focus trap will fade out when the trap activates and fade in when the trap deactivates.
It logs a message to the console when the trigger has received focus again. Note that the fade animation needs to be
written yourself, it is not built into the library.
</p>
<div id="demo-animated-trigger"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/animated-trigger.js" aria-describedby="animated-trigger-heading">View demo source <span aria-hidden="true">>></span></a>
</p>
<h2 id="ffne-heading">first focus, no escape</h2>
<p>
When this FocusTrap mounts (and activates), focus jumps to a specific, manually specified element.
</p>
<p>
Also, the Escape key does not deactivate this trap; you have to click the button to deactivate.
</p>
<div id="demo-ffne"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-ffne.js" aria-describedby="ffne-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="special-element-heading">special element</h2>
<p>
Inspect this element and you'll see that it is not the default plain div,
but rather a section tag with an id, a class, inline styles, and an
arbitrary <code>data-</code>attribute.
</p>
<p>
Also, this FocusTrap activates and deactivates while staying mounted (and does so in <a href="https://reactjs.org/docs/strict-mode.html" target="_blank">React 18 Strict Mode</a>, though the true effects of this are only applicable if you're running this demo <strong>locally in development mode</strong> since strict mode does not affect production code).
</p>
<p>
ALSO, when you click outside this FocusTrap, the trap deactivates and your click carries through.
</p>
<p>
Finally, focus should return to the "activate trap" button, whether you click the "deactivate trap"
button, or press the ESC key.
</p>
<div id="demo-special-element"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-special-element.js" aria-describedby="special-element-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="autofocus-heading">demo autofocus</h2>
<p>
The trap contains an input with the autofocus attribute.
</p>
<div id="demo-autofocus"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-autofocus.js" aria-describedby="autofocus-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="containerelements-heading">demo containerElements</h2>
<p>
You may pass in an array prop <code>containerElements</code> that contains nodes to trap focus within, which if passed will be used instead of the direct child. The direct child, if any, <strong>will be ignored by the trap</strong> (unless also given as an element in <code>containerElements</code>).
</p>
<div id="demo-containerelements"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-containerelements.js" aria-describedby="containerelements-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="containerelements-childless-heading">demo containerElements (no child)</h2>
<p>
Slight <em>underlying</em> difference from the previous "containerElements" demo in that the
focus trap element is not given a child: <code><FocusTrap containerElements={[...]} /></code>.
The result is the same, but this further reinforces the fact that when <code>containerElements</code> is
used, the child is not considered, and therefore not even necessary.
</p>
<div id="demo-containerelements-childless"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-containerelements-childless.js" aria-describedby="containerelements-childless-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="setReturnFocus-heading">demo setReturnFocus option applied</h2>
<p>
When this focus trap deactivates, it will send focus to the "Alternate Return Focus Element"
</p>
<div id="demo-setReturnFocus"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-setReturnFocus.js" aria-describedby="setReturnFocus-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<h2 id="iframe-heading">demo Iframe with document option applied</h2>
<p>
When integrated in an iframe, you may specify the document (of the said
iframe) for the focusTrap to stay inside of it.
</p>
<p>
⚠️ <strong>NOTE:</strong> When the focusTrap is in an iframe (and so using a document
other than the main/root document), focus will be trapped <em>inside the iframe</em>,
but it will still be possible to interact with any element <em>outside</em> of it.
</p>
<p>
<a
href="https://github.com/focus-trap/focus-trap-react/blob/demoOption/demo/js/demo-iframe.js"
aria-describedby="demo-iframe-heading"
>
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<div id="demo-iframe"></div>
<h2 id="with-shadow-dom-heading">with shadow dom</h2>
<p>
This focus trap <em>contains</em> tabbable elements that are <strong>inside</strong>
open and closed Shadow DOMs. It configures <code>tabbable</code> to look for Shadow DOM
elements and provides a reference to the closed Shadow when requested.
</p>
<div id="demo-with-shadow-dom"></div>
<p>
<a href="https://github.com/focus-trap/focus-trap-react/blob/master/demo/js/demo-with-shadow-dom.js" aria-describedby="defaults-heading">
View demo source <span aria-hidden="true">>></span>
</a>
</p>
<p>
<span aria-hidden="true" style="font-size:2em;vertical-align:middle;">☜</span>
<a href="https://github.com/focus-trap/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
</p>
</main>
<script src="demo-bundle.js"></script>
</body>
</html>