[Docs] Add accessibility to tabs in installation documentation (#9431)
* Add accessibility to tabs in installation documentation * Change color and fix styling
Almero Steyn committed
Apr 19, 2017 at 13:31 UTC
9526174e3074b39796c8c8fb31983372e7b30649
1 file changed
+68
-23
docs/docs/installation.md
+68
-23
@@ -12,16 +12,8 @@ redirect_from:
12
next: hello-world.html
13
---
14
<style>
15
-.tab-hidden {
15
+ .tab-hidden {
16
display: none;
17
-}
18
-.toggler a {
19
- display: inline-block;
20
- padding: 10px 5px;
21
- margin: 2px;
22
- border: 1px solid #05A5D1;
23
- border-radius: 3px;
24
- text-decoration: none !important;
17
}
18
</style>
19
@@ -29,14 +21,29 @@ React is flexible and can be used in a variety of projects. You can create new a
21
22
<div class="toggler">
23
<style>
32
- .toggler a {
33
- display: inline-block;
34
- padding: 10px 5px;
35
- margin: 2px;
36
- border: 1px solid #05A5D1;
37
- border-radius: 3px;
38
- text-decoration: none !important;
39
- color: #05A5D1;
24
+ .toggler li {
25
+ display: inline-block;
26
+ padding: 10px;
27
+ margin: 2px;
28
+ border: 1px solid #05A5D1;
29
+ border-radius: 3px;
30
+ color: #05A5D1;
31
+ background-color: transparent;
32
+ font-size: 0.99em;
33
+ cursor: pointer;
34
+ }
35
+ .toggler ul {
36
+ list-style-type: none;
37
+ margin: 0;
38
+ }
39
+ .toggler li {
40
+ display: inline;
41
+ }
42
+ .display-target-fiddle .toggler .button-fiddle:focus,
43
+ .display-target-newapp .toggler .button-newapp:focus,
44
+ .display-target-existingapp .toggler .button-existingapp:focus {
45
+ background-color: #046E8B;
46
+ color: white;
47
}
48
.display-target-fiddle .toggler .button-fiddle,
49
.display-target-newapp .toggler .button-newapp,
@@ -59,12 +66,23 @@ React is flexible and can be used in a variety of projects. You can create new a
66
<span>Which of these options best describes what you want to do?</span>
67
<br />
68
<br />
62
- <a href="javascript:void(0);" class="button-fiddle" onclick="display('target', 'fiddle')">Try React</a>
63
- <a href="javascript:void(0);" class="button-newapp" onclick="display('target', 'newapp')">Create a New App</a>
64
- <a href="javascript:void(0);" class="button-existingapp" onclick="display('target', 'existingapp')">Add React to an Existing App</a>
69
+ <ul role="tablist" >
70
+ <li id="fiddle" class="button-fiddle" aria-selected="false" role="tab" tabindex="0" aria-controls="fiddletab"
71
+ onclick="display('target', 'fiddle')" onkeyup="keyToggle(event, 'fiddle', 'existingapp', 'newapp')">
72
+ Try React
73
+ </li>
74
+ <li id="newapp" class="button-newapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="newapptab"
75
+ onclick="display('target', 'newapp')" onkeyup="keyToggle(event, 'newapp', 'fiddle', 'existingapp')">
76
+ Create a New App
77
+ </li>
78
+ <li id="existingapp" class="button-existingapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="existingapptab"
79
+ onclick="display('target', 'existingapp')" onkeyup="keyToggle(event, 'existingapp', 'newapp', 'fiddle')">
80
+ Add React to an Existing App
81
+ </li>
82
+ </ul>
83
</div>
84
67
-<block class="fiddle" />
85
+<block id="fiddletab" role="tabpanel" class="fiddle" />
86
87
## Trying Out React
88
@@ -74,7 +92,7 @@ If you prefer to use your own text editor, you can also <a href="/react/download
92
93
If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
94
77
-<block class="newapp" />
95
+<block id="newapptab" role="tabpanel" class="newapp" />
96
97
## Creating a New Application
98
@@ -92,7 +110,7 @@ Create React App doesn't handle backend logic or databases; it just creates a fr
110
111
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
112
95
-<block class="existingapp" />
113
+<block id="existingapptab" role="tabpanel" class="existingapp" />
114
115
## Adding React to an Existing Application
116
@@ -216,7 +234,34 @@ for (var i = 0; i < blocks.length; ++i) {
234
block.appendChild(block.nextSibling);
235
}
236
}
237
+
238
+function setSelected(value){
239
+ var tabs = document.querySelectorAll('li[role="tab"]');
240
+ for (var i = 0; i < tabs.length; ++i) {
241
+ var tab = tabs[i];
242
+ if (tab.className === 'button-' + value) {
243
+ tabs[i].setAttribute('aria-selected', 'true');
244
+ tabs[i].setAttribute('tabindex', '0');
245
+ } else {
246
+ tabs[i].setAttribute('aria-selected', 'false');
247
+ tabs[i].setAttribute('tabindex', '-1');
248
+ }
249
+ }
250
+}
251
+
252
+function keyToggle(e, value, prevTab, nextTab){
253
+ if (e.keyCode === 37) {
254
+ document.getElementById(prevTab).focus();
255
+ display('target', prevTab);
256
+ }
257
+ if (e.keyCode === 39) {
258
+ document.getElementById(nextTab).focus();
259
+ display('target', nextTab);
260
+ }
261
+}
262
+
263
function display(type, value) {
264
+ setSelected(value);
265
var container = document.getElementsByTagName('block')[0].parentNode;
266
container.className = 'display-' + type + '-' + value + ' ' +
267
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');