From 94b30c3c36013804fe47b3650949abd47197cd52 Mon Sep 17 00:00:00 2001
From: Michael Fix <mrfix84@gmail.com>
Date: Wed, 8 May 2019 17:42:35 -0700
Subject: [PATCH] A11y improvements (#755)

* improve screen reading for menu values

* clean up Drop down component

* typo
---
 components/BackgroundSelect.js |   1 +
 components/Button.js           |   5 +-
 components/Dropdown.js         | 119 +++++++++++++++++----------------
 components/Editor.js           |   1 +
 components/Settings.js         |   1 +
 components/Themes/index.js     |   1 +
 package.json                   |   1 +
 yarn.lock                      |   5 ++
 8 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 9520099..86b683d 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -33,6 +33,7 @@ class BackgroundSelect extends React.PureComponent {
     return (
       <div className="bg-select-container">
         <Button
+          title="Background Menu"
           border
           center
           selected={isVisible}
diff --git a/components/Button.js b/components/Button.js
index 11d906c..898c2fc 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import VisuallyHidden from '@reach/visually-hidden'
 
 import { COLORS } from '../lib/constants'
 
@@ -19,9 +20,11 @@ const Button = ({
   style = {},
   flex = 1,
   padding = 0,
-  margin = 0
+  margin = 0,
+  title
 }) => (
   <button id={id} onClick={onClick} className={className} disabled={disabled} style={style}>
+    {title && <VisuallyHidden>{title}</VisuallyHidden>}
     {children}
     <style jsx>
       {`
diff --git a/components/Dropdown.js b/components/Dropdown.js
index a00c797..e92f059 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Downshift from 'downshift'
 import matchSorter from 'match-sorter'
+import VisuallyHidden from '@reach/visually-hidden'
 import { Down as ArrowDown } from './svg/Arrows'
 import CheckMark from './svg/Checkmark'
 import { COLORS } from '../lib/constants'
@@ -56,11 +57,63 @@ class Dropdown extends React.PureComponent {
 
   userInputtedValue = ''
 
+  renderDropdown = ({
+    isOpen,
+    highlightedIndex,
+    selectedItem,
+    getRootProps,
+    getToggleButtonProps,
+    getInputProps,
+    getItemProps
+  }) => {
+    const { list, color, itemWrapper, icon, disableInput, title } = this.props
+    const { itemsToShow } = this.state
+
+    const minWidth = calcMinWidth(itemsToShow)
+    const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
+
+    return (
+      <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
+        {title && <VisuallyHidden id={labelId}>{title}</VisuallyHidden>}
+        <DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
+        <SelectedItem
+          getToggleButtonProps={getToggleButtonProps}
+          getInputProps={getInputProps}
+          isOpen={isOpen}
+          color={color}
+          hasIcon={!!icon}
+          disabled={disableInput}
+        >
+          {selectedItem.name}
+        </SelectedItem>
+        {isOpen ? (
+          <List color={color}>
+            {list.map((item, index) => (
+              <ListItem
+                key={index}
+                color={color}
+                item={item}
+                itemWrapper={itemWrapper}
+                {...getItemProps({
+                  item,
+                  isSelected: selectedItem.name === item.name,
+                  isHighlighted: highlightedIndex === index
+                })}
+              >
+                {item.name}
+              </ListItem>
+            ))}
+          </List>
+        ) : null}
+      </DropdownContainer>
+    )
+  }
+
   render() {
-    const { innerRef, color, selected, onChange, itemWrapper, icon, disableInput } = this.props
+    const { innerRef, selected, onChange, title } = this.props
     const { itemsToShow, inputValue } = this.state
 
-    const minWidth = calcMinWidth(itemsToShow)
+    const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
 
     return (
       <Downshift
@@ -71,66 +124,14 @@ class Dropdown extends React.PureComponent {
         itemToString={item => item.name}
         onChange={onChange}
         onUserAction={this.onUserAction}
+        labelId={labelId}
       >
-        {renderDropdown({
-          color,
-          list: itemsToShow,
-          selected,
-          minWidth,
-          itemWrapper,
-          icon,
-          disableInput
-        })}
+        {this.renderDropdown}
       </Downshift>
     )
   }
 }
 
-const renderDropdown = ({ color, list, minWidth, itemWrapper, icon, disableInput }) => ({
-  isOpen,
-  highlightedIndex,
-  selectedItem,
-  getRootProps,
-  getToggleButtonProps,
-  getInputProps,
-  getItemProps
-}) => {
-  return (
-    <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
-      <DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
-      <SelectedItem
-        getToggleButtonProps={getToggleButtonProps}
-        getInputProps={getInputProps}
-        isOpen={isOpen}
-        color={color}
-        hasIcon={!!icon}
-        disabled={disableInput}
-      >
-        {selectedItem.name}
-      </SelectedItem>
-      {isOpen ? (
-        <ListItems color={color}>
-          {list.map((item, index) => (
-            <ListItem
-              key={index}
-              color={color}
-              item={item}
-              itemWrapper={itemWrapper}
-              {...getItemProps({
-                item,
-                isSelected: selectedItem.name === item.name,
-                isHighlighted: highlightedIndex === index
-              })}
-            >
-              {item.name}
-            </ListItem>
-          ))}
-        </ListItems>
-      ) : null}
-    </DropdownContainer>
-  )
-}
-
 const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
   return (
     <div {...rest} ref={innerRef} className="dropdown-container">
@@ -173,9 +174,9 @@ const DropdownIcon = ({ children, isOpen }) => {
         </style>
       </div>
     )
-  } else {
-    return null
   }
+
+  return null
 }
 
 const SelectedItem = ({
@@ -245,7 +246,7 @@ const SelectedItem = ({
   )
 }
 
-const ListItems = ({ children, color }) => {
+const List = ({ children, color }) => {
   return (
     <ul role="listbox" className="dropdown-list">
       {children}
diff --git a/components/Editor.js b/components/Editor.js
index 0b2be6d..7c20fb9 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -332,6 +332,7 @@ class Editor extends React.Component {
             themes={this.props.themes}
           />
           <Dropdown
+            title="Language"
             icon={languageIcon}
             selected={
               LANGUAGE_NAME_HASH[language] ||
diff --git a/components/Settings.js b/components/Settings.js
index 8df654b..7a2b968 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -354,6 +354,7 @@ class Settings extends React.PureComponent {
     return (
       <div className="settings-container" ref={this.settingsRef}>
         <Button
+          title="Settings Menu"
           border
           center
           selected={isVisible}
diff --git a/components/Themes/index.js b/components/Themes/index.js
index 61cd7df..cd9ef56 100644
--- a/components/Themes/index.js
+++ b/components/Themes/index.js
@@ -103,6 +103,7 @@ class Themes extends React.PureComponent {
     return (
       <div className="themes">
         <Dropdown
+          title="Theme"
           innerRef={this.dropdown}
           icon={themeIcon}
           disableInput={isVisible}
diff --git a/package.json b/package.json
index b2f946f..6261b19 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@dawnlabs/tacklebox": "^0.0.10",
+    "@reach/visually-hidden": "^0.1.4",
     "axios": "^0.18.0",
     "codemirror": "^5.42.2",
     "codemirror-graphql": "^0.8.3",
diff --git a/yarn.lock b/yarn.lock
index d93cd5a..2231396 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -930,6 +930,11 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/yargs" "^12.0.9"
 
+"@reach/visually-hidden@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
+  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"