fix: makes skin tone picker more accessible

fixes #220
nolan/hinaloe-test
Nolan Lawson 2019-03-09 14:19:24 -08:00
parent c2c7092fc4
commit 740eccb6d0
3 changed files with 39 additions and 2 deletions

View File

@ -75,6 +75,14 @@ categories: {
custom: 'Custom', custom: 'Custom',
}, },
categorieslabel: 'Emoji categories', // Accessible title for the list of categories categorieslabel: 'Emoji categories', // Accessible title for the list of categories
skintones: {
1: 'Default Skin Tone',
2: 'Light Skin Tone',
3: 'Medium-Light Skin Tone',
4: 'Medium Skin Tone',
5: 'Medium-Dark Skin Tone',
6: 'Dark Skin Tone',
},
``` ```
#### Sheet sizes #### Sheet sizes

View File

@ -35,6 +35,14 @@ const I18N = {
custom: 'Custom', custom: 'Custom',
}, },
categorieslabel: 'Emoji categories', // Accessible title for the list of categories categorieslabel: 'Emoji categories', // Accessible title for the list of categories
skintones: {
1: 'Default Skin Tone',
2: 'Light Skin Tone',
3: 'Medium-Light Skin Tone',
4: 'Medium Skin Tone',
5: 'Medium-Dark Skin Tone',
6: 'Dark Skin Tone',
},
} }
export default class NimblePicker extends React.PureComponent { export default class NimblePicker extends React.PureComponent {

View File

@ -8,6 +8,14 @@ export default class SkinsDot extends Skins {
super(props) super(props)
this.handleClick = this.handleClick.bind(this) this.handleClick = this.handleClick.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
}
handleKeyDown(event) {
// if either enter or space is pressed, then execute
if (event.keyCode === 13 || event.keyCode === 32) {
this.handleClick(event)
}
} }
render() { render() {
@ -17,6 +25,7 @@ export default class SkinsDot extends Skins {
for (let skinTone = 1; skinTone <= 6; skinTone++) { for (let skinTone = 1; skinTone <= 6; skinTone++) {
const selected = skinTone === skin const selected = skinTone === skin
const visible = opened || selected
skinToneNodes.push( skinToneNodes.push(
<span <span
key={`skin-tone-${skinTone}`} key={`skin-tone-${skinTone}`}
@ -24,6 +33,15 @@ export default class SkinsDot extends Skins {
> >
<span <span
onClick={this.handleClick} onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
role="button"
tabindex={visible ? '0' : ''}
aria-hidden={!visible}
aria-pressed={opened ? !!selected : ''}
aria-haspopup={!!selected}
aria-expanded={selected ? opened : ''}
aria-label={i18n.skintones[skinTone]}
title={i18n.skintones[skinTone]}
data-skin={skinTone} data-skin={skinTone}
className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`} className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}
/> />
@ -32,9 +50,12 @@ export default class SkinsDot extends Skins {
} }
return ( return (
<div className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}> <section
className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}
aria-label={i18n.skintext}
>
{skinToneNodes} {skinToneNodes}
</div> </section>
) )
} }
} }