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

fix: improve accessible page structure

README.md

@@ -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: {

src/components/picker/nimble-picker.js

@@ -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>
     )
   }
 }

src/components/preview.js

@@ -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>
 

src/components/search.js

@@ -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>
     )
   }
 }