fix(v2): various improvements for accessibility (#2442)

facebook · Mar 23, 2020 · 3052ef1 · 3052ef1
1 parent 15a21ac
commit 3052ef1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}