From b062db409cd1fb59eae73a5427722c6988b36b1a Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 22 Mar 2020 17:12:21 +0300
Subject: [PATCH] fix(v2): various improvements for accessibility

---
 .../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 ad60fd60f40b..4921105531aa 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 30faedc5f65c..50225f917025 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -162,6 +162,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={() => {
@@ -177,6 +178,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 64055ec799c8..624c2940e606 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -99,7 +99,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 c6499a2210f1..776a6141ff05 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 75ddac84411e..b21164bf530d 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}