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
commit 8fd11b0e2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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