treehouse
/
emoji-mart-lazyload
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve a11y of skin tone picker

release
Nolan Lawson 2019-03-12 20:37:45 -07:00
parent af29bd19b0
commit 585b4b374f
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/skins-dot.js
View File

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