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

Merge pull request #282 from nolanlawson/nolan/issue-219 

fix: make categories into accessible nav buttons
release
Nolan Lawson 2019-03-12 08:08:46 -07:00 committed by GitHub
parent 445d2d4656 2fc7816116
commit c2c7092fc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -73,7 +73,8 @@ categories: {
symbols: 'Symbols', symbols: 'Symbols',
flags: 'Flags', flags: 'Flags',
custom: 'Custom', custom: 'Custom',
} },
categorieslabel: 'Emoji categories', // Accessible title for the list of categories
``` ```
#### Sheet sizes #### Sheet sizes

6
css/emoji-mart.css
View File

@ -49,6 +49,10 @@
padding: 12px 4px; padding: 12px 4px;
overflow: hidden; overflow: hidden;
transition: color .1s ease-out; transition: color .1s ease-out;
margin: 0;
box-shadow: none;
background: none;
border: none;
} }
.emoji-mart-anchor:hover, .emoji-mart-anchor:hover,
.emoji-mart-anchor-selected { .emoji-mart-anchor-selected {
@ -74,7 +78,7 @@
.emoji-mart-anchors svg, .emoji-mart-anchors svg,
.emoji-mart-anchors img { .emoji-mart-anchors img {
fill: currentColor; fill: #858585;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }

9
src/components/anchors.js
View File

@ -28,7 +28,7 @@ export default class Anchors extends React.PureComponent {
{ selected } = this.state { selected } = this.state
return ( return (
<div className="emoji-mart-anchors"> <nav className="emoji-mart-anchors" aria-label={i18n.categorieslabel}>
{categories.map((category, i) => { {categories.map((category, i) => {
var { id, name, anchor } = category, var { id, name, anchor } = category,
isSelected = name == selected isSelected = name == selected
@ -38,8 +38,9 @@ export default class Anchors extends React.PureComponent {
} }
return ( return (
<span <button
key={id} key={id}
aria-label={i18n.categories[id]}
title={i18n.categories[id]} title={i18n.categories[id]}
data-index={i} data-index={i}
onClick={this.handleClick} onClick={this.handleClick}
@ -55,10 +56,10 @@ export default class Anchors extends React.PureComponent {
className="emoji-mart-anchor-bar" className="emoji-mart-anchor-bar"
style={{ backgroundColor: color }} style={{ backgroundColor: color }}
/> />
</span> </button>
) )
})} })}
</div> </nav>
) )
} }
} }

1
src/components/picker/nimble-picker.js
View File

@ -34,6 +34,7 @@ const I18N = {
flags: 'Flags', flags: 'Flags',
custom: 'Custom', custom: 'Custom',
}, },
categorieslabel: 'Emoji categories', // Accessible title for the list of categories
} }
export default class NimblePicker extends React.PureComponent { export default class NimblePicker extends React.PureComponent {