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

Merge pull request #296 from nolanlawson/nolan/accessible-page-structure 

fix: improve accessible page structure
release
Nolan Lawson 2019-03-14 08:32:36 -07:00 committed by GitHub
parent af29bd19b0 058cdec053
commit 8fd11b0e2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -59,7 +59,6 @@ import { Picker } from 'emoji-mart'
```js ```js
search: 'Search', search: 'Search',
clear: 'Clear', // Accessible label on "clear" button clear: 'Clear', // Accessible label on "clear" button
emojilist: 'List of emoji', // Accessible title for list of emoji
notfound: 'No Emoji Found', notfound: 'No Emoji Found',
skintext: 'Choose your default skin tone', skintext: 'Choose your default skin tone',
categories: { categories: {

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

@ -19,7 +19,6 @@ import { PickerDefaultProps } from '../../utils/shared-default-props'
const I18N = { const I18N = {
search: 'Search', search: 'Search',
clear: 'Clear', // Accessible label on "clear" button clear: 'Clear', // Accessible label on "clear" button
emojilist: 'List of emoji', // Accessible title for list of emoji
notfound: 'No Emoji Found', notfound: 'No Emoji Found',
skintext: 'Choose your default skin tone', skintext: 'Choose your default skin tone',
categories: { categories: {
@ -501,9 +500,10 @@ export default class NimblePicker extends React.PureComponent {
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar() width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
return ( return (
<div <section
style={{ width: width, ...style }} style={{ width: width, ...style }}
className="emoji-mart" className="emoji-mart"
aria-label={title}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
> >
<div className="emoji-mart-bar"> <div className="emoji-mart-bar">
@ -530,10 +530,9 @@ export default class NimblePicker extends React.PureComponent {
autoFocus={autoFocus} autoFocus={autoFocus}
/> />
<section <div
ref={this.setScrollRef} ref={this.setScrollRef}
className="emoji-mart-scroll" className="emoji-mart-scroll"
aria-label={this.i18n.emojilist}
onScroll={this.handleScroll} onScroll={this.handleScroll}
> >
{this.getCategories().map((category, i) => { {this.getCategories().map((category, i) => {
@ -577,7 +576,7 @@ export default class NimblePicker extends React.PureComponent {
/> />
) )
})} })}
</section> </div>
{(showPreview || showSkinTones) && ( {(showPreview || showSkinTones) && (
<div className="emoji-mart-bar"> <div className="emoji-mart-bar">
@ -607,7 +606,7 @@ export default class NimblePicker extends React.PureComponent {
/> />
</div> </div>
)} )}
</div> </section>
) )
} }
} }

8
src/components/preview.js
View File

@ -43,7 +43,7 @@ export default class Preview extends React.PureComponent {
return ( return (
<div className="emoji-mart-preview"> <div className="emoji-mart-preview">
<div className="emoji-mart-preview-emoji"> <div className="emoji-mart-preview-emoji" aria-hidden="true">
{NimbleEmoji({ {NimbleEmoji({
key: emoji.id, key: emoji.id,
emoji: emoji, emoji: emoji,
@ -52,7 +52,7 @@ export default class Preview extends React.PureComponent {
})} })}
</div> </div>
<div className="emoji-mart-preview-data"> <div className="emoji-mart-preview-data" aria-hidden="true">
<div className="emoji-mart-preview-name">{emoji.name}</div> <div className="emoji-mart-preview-name">{emoji.name}</div>
<div className="emoji-mart-preview-shortnames"> <div className="emoji-mart-preview-shortnames">
{emojiData.short_names.map((short_name) => ( {emojiData.short_names.map((short_name) => (
@ -74,13 +74,13 @@ export default class Preview extends React.PureComponent {
} else { } else {
return ( return (
<div className="emoji-mart-preview"> <div className="emoji-mart-preview">
<div className="emoji-mart-preview-emoji"> <div className="emoji-mart-preview-emoji" aria-hidden="true">
{idleEmoji && {idleEmoji &&
idleEmoji.length && idleEmoji.length &&
NimbleEmoji({ emoji: idleEmoji, data: this.data, ...emojiProps })} NimbleEmoji({ emoji: idleEmoji, data: this.data, ...emojiProps })}
</div> </div>
<div className="emoji-mart-preview-data"> <div className="emoji-mart-preview-data" aria-hidden="true">
<span className="emoji-mart-title-label">{title}</span> <span className="emoji-mart-title-label">{title}</span>
</div> </div>

4
src/components/search.js
View File

@ -83,7 +83,7 @@ export default class Search extends React.PureComponent {
const inputId = `emoji-mart-search-${id}` const inputId = `emoji-mart-search-${id}`
return ( return (
<div className="emoji-mart-search"> <section className="emoji-mart-search" aria-label={i18n.search}>
<input <input
id={inputId} id={inputId}
ref={this.setRef} ref={this.setRef}
@ -108,7 +108,7 @@ export default class Search extends React.PureComponent {
> >
{icon()} {icon()}
</button> </button>
</div> </section>
) )
} }
} }