From 9526174e3074b39796c8c8fb31983372e7b30649 Mon Sep 17 00:00:00 2001
From: Almero Steyn <almero.steyn@gmail.com>
Date: Wed, 19 Apr 2017 13:31:39 +0200
Subject: [PATCH] [Docs] Add accessibility to tabs in installation
 documentation (#9431)

* Add accessibility to tabs in installation documentation

* Change color and fix styling
---
 docs/docs/installation.md | 91 +++++++++++++++++++++++++++++----------
 1 file changed, 68 insertions(+), 23 deletions(-)

diff --git a/docs/docs/installation.md b/docs/docs/installation.md
index 6687a96177..615a1726ea 100644
--- a/docs/docs/installation.md
+++ b/docs/docs/installation.md
@@ -12,16 +12,8 @@ redirect_from:
 next: hello-world.html
 ---
 <style>
-.tab-hidden {
+  .tab-hidden {
     display: none;
-}
-.toggler a {
-    display: inline-block;
-    padding: 10px 5px;
-    margin: 2px;
-    border: 1px solid #05A5D1;
-    border-radius: 3px;
-    text-decoration: none !important;
   }
 </style>
 
@@ -29,14 +21,29 @@ React is flexible and can be used in a variety of projects. You can create new a
 
 <div class="toggler">
   <style>
-    .toggler a {
-      display: inline-block;
-      padding: 10px 5px;
-      margin: 2px;
-      border: 1px solid #05A5D1;
-      border-radius: 3px;
-      text-decoration: none !important;
-      color: #05A5D1;
+    .toggler li {
+       display: inline-block;
+       padding: 10px;
+       margin: 2px;
+       border: 1px solid #05A5D1;
+       border-radius: 3px;
+       color: #05A5D1;
+       background-color: transparent;
+       font-size: 0.99em;
+       cursor: pointer;
+    }
+    .toggler ul {
+      list-style-type: none;
+      margin: 0;
+    }
+    .toggler li {
+      display: inline;
+    }
+    .display-target-fiddle .toggler .button-fiddle:focus,
+    .display-target-newapp .toggler .button-newapp:focus,
+    .display-target-existingapp .toggler .button-existingapp:focus {
+      background-color: #046E8B;
+      color: white;
     }
     .display-target-fiddle .toggler .button-fiddle,
     .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
   <span>Which of these options best describes what you want to do?</span>
   <br />
   <br />
-  <a href="javascript:void(0);" class="button-fiddle" onclick="display('target', 'fiddle')">Try React</a>
-  <a href="javascript:void(0);" class="button-newapp" onclick="display('target', 'newapp')">Create a New App</a>
-  <a href="javascript:void(0);" class="button-existingapp" onclick="display('target', 'existingapp')">Add React to an Existing App</a>
+   <ul role="tablist" >
+      <li id="fiddle" class="button-fiddle" aria-selected="false" role="tab" tabindex="0" aria-controls="fiddletab"
+          onclick="display('target', 'fiddle')" onkeyup="keyToggle(event, 'fiddle', 'existingapp', 'newapp')">
+        Try React
+      </li>
+      <li id="newapp" class="button-newapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="newapptab"
+          onclick="display('target', 'newapp')" onkeyup="keyToggle(event, 'newapp', 'fiddle', 'existingapp')">
+        Create a New App
+      </li>
+      <li id="existingapp" class="button-existingapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="existingapptab"
+          onclick="display('target', 'existingapp')" onkeyup="keyToggle(event, 'existingapp', 'newapp', 'fiddle')">
+        Add React to an Existing App
+      </li>
+    </ul>
 </div>
 
-<block class="fiddle" />
+<block id="fiddletab" role="tabpanel" class="fiddle"  />
 
 ## Trying Out React
 
@@ -74,7 +92,7 @@ If you prefer to use your own text editor, you can also <a href="/react/download
 
 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.
 
-<block class="newapp" />
+<block id="newapptab" role="tabpanel" class="newapp" />
 
 ## Creating a New Application
 
@@ -92,7 +110,7 @@ Create React App doesn't handle backend logic or databases; it just creates a fr
 
 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).
 
-<block class="existingapp" />
+<block id="existingapptab" role="tabpanel" class="existingapp" />
 
 ## Adding React to an Existing Application
 
@@ -216,7 +234,34 @@ for (var i = 0; i < blocks.length; ++i) {
     block.appendChild(block.nextSibling);
   }
 }
+
+function setSelected(value){
+  var tabs = document.querySelectorAll('li[role="tab"]');
+  for (var i = 0; i < tabs.length; ++i) {
+    var tab = tabs[i];
+    if (tab.className === 'button-' + value) {
+      tabs[i].setAttribute('aria-selected', 'true');
+      tabs[i].setAttribute('tabindex', '0');
+    } else {
+      tabs[i].setAttribute('aria-selected', 'false');
+      tabs[i].setAttribute('tabindex', '-1');
+    }
+  }
+}
+
+function keyToggle(e, value, prevTab, nextTab){
+  if (e.keyCode === 37) {
+    document.getElementById(prevTab).focus();
+    display('target', prevTab);
+  }
+  if (e.keyCode === 39) {
+    document.getElementById(nextTab).focus();
+    display('target', nextTab);
+  }
+}
+
 function display(type, value) {
+  setSelected(value);
   var container = document.getElementsByTagName('block')[0].parentNode;
   container.className = 'display-' + type + '-' + value + ' ' +
     container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');