Merge pull request #297 from nolanlawson/nolan/improve-a11y-skin-dots

fix: improve a11y of skin tone picker
release
Nolan Lawson 2019-03-14 08:32:49 -07:00 committed by GitHub
commit 165d1a9736
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions

View File

@ -30,16 +30,20 @@ export default class SkinsDot extends Skins {
<span
key={`skin-tone-${skinTone}`}
className={`emoji-mart-skin-swatch${selected ? ' selected' : ''}`}
aria-label={i18n.skintones[skinTone]}
aria-hidden={!visible}
{...opened ? { role: 'menuitem' } : {}}
>
<span
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
role="button"
{...selected ? {
'aria-haspopup': true,
'aria-expanded': !!opened,
} : {}}
{...opened ? { 'aria-pressed': !!selected } : {}}
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}
@ -54,7 +58,7 @@ export default class SkinsDot extends Skins {
className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}
aria-label={i18n.skintext}
>
{skinToneNodes}
<div {...opened ? { role: 'menubar' } : {}}>{skinToneNodes}</div>
</section>
)
}