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

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
parent 8fd11b0e2a f53d9b8c71
commit 165d1a9736
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>
) )
} }