From c4575b81d5146831578ff8621153a276bb194768 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 14 Nov 2019 14:07:28 +0300
Subject: [PATCH 1/2] refactor(v2): make better a11y for tabs

---
 .../src/theme/Tabs/index.js                   | 53 ++++++++++++++++++-
 .../src/theme/Tabs/styles.module.css          |  9 ++++
 2 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
index 7aae32d9f433..4047740feb39 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
@@ -9,28 +9,77 @@ import React, {useState, Children} from 'react';
 
 import classnames from 'classnames';
 
+import styles from './styles.module.css';
+
+const keys = {
+  left: 37,
+  right: 39,
+};
+
 function Tabs(props) {
   const {block, children, defaultValue, values} = props;
   const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const tabRefs = [];
+
+  const focusNextTab = (tabs, target) => {
+    const next = tabs.indexOf(target) + 1;
+
+    if (!tabs[next]) {
+      tabs[0].focus();
+    } else {
+      tabs[next].focus();
+    }
+  };
+
+  const focusPreviousTab = (tabs, target) => {
+    const prev = tabs.indexOf(target) - 1;
+
+    if (!tabs[prev]) {
+      tabs[tabs.length - 1].focus();
+    } else {
+      tabs[prev].focus();
+    }
+  };
+
+  const handleKeydown = (tabs, target, event) => {
+    switch (event.keyCode) {
+      case keys.right:
+        focusNextTab(tabs, target);
+        break;
+      case keys.left:
+        focusPreviousTab(tabs, target);
+        break;
+      default:
+        break;
+    }
+  };
 
   return (
     <div>
       <ul
+        role="tablist"
+        aria-orientation="horizontal"
         className={classnames('tabs', {
           'tabs--block': block,
         })}>
         {values.map(({value, label}) => (
           <li
-            className={classnames('tab-item', {
+            role="tab"
+            tabIndex="0"
+            aria-selected={selectedValue === value}
+            className={classnames('tab-item', styles.tabItem, {
               'tab-item--active': selectedValue === value,
             })}
             key={value}
+            ref={tabControl => tabRefs.push(tabControl)}
+            onKeyDown={event => handleKeydown(tabRefs, event.target, event)}
+            onFocus={() => setSelectedValue(value)}
             onClick={() => setSelectedValue(value)}>
             {label}
           </li>
         ))}
       </ul>
-      <div className="margin-vert--md">
+      <div role="tabpanel" className="margin-vert--md">
         {
           Children.toArray(children).filter(
             child => child.props.value === selectedValue,
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
new file mode 100644
index 000000000000..f99b7a37be0f
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
@@ -0,0 +1,9 @@
+.tabItem:hover,
+.tabItem:active,
+.tabItem:focus {
+  outline: 0;
+}
+
+.tabItem:focus {
+  background-color: var(--ifm-hover-overlay);
+}

From e602b0a60e57026ff192b1e601616dca928543e1 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 23 Nov 2019 18:27:21 -0800
Subject: [PATCH 2/2] Update styles.module.css

---
 .../src/theme/Tabs/styles.module.css                  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
index f99b7a37be0f..1c9a6d88fca7 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
@@ -1,8 +1,9 @@
-.tabItem:hover,
-.tabItem:active,
-.tabItem:focus {
-  outline: 0;
-}
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 .tabItem:focus {
   background-color: var(--ifm-hover-overlay);