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,37 +57,7 @@ class Dropdown extends React.PureComponent {
 
   userInputtedValue = ''
 
-  render() {
+  renderDropdown = ({
-    const { innerRef, color, selected, onChange, itemWrapper, icon, disableInput } = this.props
-    const { itemsToShow, inputValue } = this.state
-
-    const minWidth = calcMinWidth(itemsToShow)
-
-    return (
-      <Downshift
-        ref={innerRef}
-        inputValue={inputValue}
-        selectedItem={selected}
-        defaultHighlightedIndex={itemsToShow.findIndex(it => it === selected)}
-        itemToString={item => item.name}
-        onChange={onChange}
-        onUserAction={this.onUserAction}
-      >
-        {renderDropdown({
-          color,
-          list: itemsToShow,
-          selected,
-          minWidth,
-          itemWrapper,
-          icon,
-          disableInput
-        })}
-      </Downshift>
-    )
-  }
-}
-
-const renderDropdown = ({ color, list, minWidth, itemWrapper, icon, disableInput }) => ({
     isOpen,
     highlightedIndex,
     selectedItem,
@@ -94,9 +65,16 @@ const renderDropdown = ({ color, list, minWidth, itemWrapper, icon, disableInput
     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}
@@ -109,7 +87,7 @@ const renderDropdown = ({ color, list, minWidth, itemWrapper, icon, disableInput
           {selectedItem.name}
         </SelectedItem>
         {isOpen ? (
-        <ListItems color={color}>
+          <List color={color}>
             {list.map((item, index) => (
               <ListItem
                 key={index}
@@ -125,10 +103,33 @@ const renderDropdown = ({ color, list, minWidth, itemWrapper, icon, disableInput
                 {item.name}
               </ListItem>
             ))}
-        </ListItems>
+          </List>
         ) : null}
       </DropdownContainer>
     )
+  }
+
+  render() {
+    const { innerRef, selected, onChange, title } = this.props
+    const { itemsToShow, inputValue } = this.state
+
+    const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
+
+    return (
+      <Downshift
+        ref={innerRef}
+        inputValue={inputValue}
+        selectedItem={selected}
+        defaultHighlightedIndex={itemsToShow.findIndex(it => it === selected)}
+        itemToString={item => item.name}
+        onChange={onChange}
+        onUserAction={this.onUserAction}
+        labelId={labelId}
+      >
+        {this.renderDropdown}
+      </Downshift>
+    )
+  }
 }
 
 const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
@@ -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"