From 3052ef14e56ab6659a7006138b684a2bc4954676 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Mon, 23 Mar 2020 06:46:57 +0300
Subject: [PATCH] fix(v2): various improvements for accessibility (#2442)

---
 .../docusaurus-theme-classic/src/theme/CodeBlock/index.js   | 4 ++--
 .../docusaurus-theme-classic/src/theme/DocSidebar/index.js  | 2 ++
 packages/docusaurus-theme-classic/src/theme/Navbar/index.js | 3 ++-
 .../src/theme/CodeBlock/index.js                            | 4 ++--
 website/src/components/ColorGenerator/index.js              | 6 +++++-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index ad60fd60f4..4921105531 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -100,7 +100,7 @@ export default ({children, className: languageClassName, metastring}) => {
             {showCopied ? 'Copied' : 'Copy'}
           </button>
 
-          <code ref={target} className={styles.codeBlockLines} style={style}>
+          <div ref={target} className={styles.codeBlockLines} style={style}>
             {tokens.map((line, i) => {
               if (line.length === 1 && line[0].content === '') {
                 line[0].content = '\n'; // eslint-disable-line no-param-reassign
@@ -120,7 +120,7 @@ export default ({children, className: languageClassName, metastring}) => {
                 </div>
               );
             })}
-          </code>
+          </div>
         </pre>
       )}
     </Highlight>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index 21805a63eb..7e292115e5 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -161,6 +161,7 @@ function DocSidebar(props) {
         })}>
         <button
           aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'}
+          aria-haspopup="true"
           className="button button--secondary button--sm menu__button"
           type="button"
           onClick={() => {
@@ -176,6 +177,7 @@ function DocSidebar(props) {
             </span>
           ) : (
             <svg
+              aria-label="Menu"
               className={styles.sidebarMenuIcon}
               xmlns="http://www.w3.org/2000/svg"
               height={MOBILE_TOGGLE_SIZE}
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index eb2497c0f3..a5dacc4833 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -89,7 +89,8 @@ function Navbar() {
         'navbar-sidebar--show': sidebarShown,
         [styles.navbarHideable]: hideOnScroll,
         [styles.navbarHidden]: !isNavbarVisible,
-      })}>
+      })}
+      role="navigation">
       <div className="navbar__inner">
         <div className="navbar__items">
           <div
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
index c6499a2210..776a6141ff 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -119,7 +119,7 @@ export default ({
             {showCopied ? 'Copied' : 'Copy'}
           </button>
 
-          <code ref={target} className={styles.codeBlockLines} style={style}>
+          <div ref={target} className={styles.codeBlockLines} style={style}>
             {tokens.map((line, i) => {
               if (line.length === 1 && line[0].content === '') {
                 line[0].content = '\n'; // eslint-disable-line no-param-reassign
@@ -139,7 +139,7 @@ export default ({
                 </div>
               );
             })}
-          </code>
+          </div>
         </pre>
       )}
     </Highlight>
diff --git a/website/src/components/ColorGenerator/index.js b/website/src/components/ColorGenerator/index.js
index 75ddac8441..b21164bf53 100644
--- a/website/src/components/ColorGenerator/index.js
+++ b/website/src/components/ColorGenerator/index.js
@@ -77,8 +77,11 @@ function ColorGenerator({children, minHeight, url}) {
   return (
     <div>
       <p>
-        <strong className="margin-right--sm">Primary Color:</strong>{' '}
+        <label htmlFor="primary_color">
+          <strong className="margin-right--sm">Primary Color:</strong>
+        </label>{' '}
         <input
+          id="primary_color"
           className={styles.input}
           defaultValue={baseColor}
           onChange={event => {
@@ -127,6 +130,7 @@ function ColorGenerator({children, minHeight, url}) {
                         0
                       ) : (
                         <input
+                          aria-label={`${variableName} CSS variable name`}
                           className={styles.input}
                           type="number"
                           value={adjustmentInput}