A11y improvements (#755)

* improve screen reading for menu values

* clean up Drop down component

* typo

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}

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>
       {`

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({
+        {this.renderDropdown}
-          color,
-          list: itemsToShow,
-          selected,
-          minWidth,
-          itemWrapper,
-          icon,
-          disableInput
-        })}
       </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}

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] ||

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}

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}

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",

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"