A11y improvements (#755)

* improve screen reading for menu values

* clean up Drop down component

* typo
main
Michael Fix 6 years ago committed by GitHub
parent 4e1b6259e6
commit 94b30c3c36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -33,6 +33,7 @@ class BackgroundSelect extends React.PureComponent {
return (
<div className="bg-select-container">
<Button
title="Background Menu"
border
center
selected={isVisible}

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

@ -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() {
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 }) => ({
renderDropdown = ({
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}

@ -332,6 +332,7 @@ class Editor extends React.Component {
themes={this.props.themes}
/>
<Dropdown
title="Language"
icon={languageIcon}
selected={
LANGUAGE_NAME_HASH[language] ||

@ -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}

@ -103,6 +103,7 @@ class Themes extends React.PureComponent {
return (
<div className="themes">
<Dropdown
title="Theme"
innerRef={this.dropdown}
icon={themeIcon}
disableInput={isVisible}

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

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

Loading…
Cancel
Save