fix: improve a11y of emoji list

fixes missive#218
nolanlawson · Mar 10, 2019 · bba9420 · bba9420
1 parent 8c80e7d
commit bba9420
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -58,6 +58,7 @@ import { Picker } from 'emoji-mart'
 #### I18n
 ```js
 search: 'Search',
+emojilist: 'List of emoji', // Accessible title for list of emoji
 notfound: 'No Emoji Found',
 skintext: 'Choose your default skin tone',
 categories: {

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
@@ -150,6 +150,11 @@
   position: relative;
   display: inline-block;
   font-size: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
 }
 
 .emoji-mart-emoji-native {

diff --git a/src/components/category.js b/src/components/category.js
@@ -176,17 +176,21 @@ export default class Category extends React.Component {
     }
 
     return (
-      <div
+      <section
         ref={this.setContainerRef}
         className="emoji-mart-category"
+        aria-label={i18n.categories[id]}
         style={containerStyles}
       >
         <div
           style={labelStyles}
           data-name={name}
           className="emoji-mart-category-label"
         >
-          <span style={labelSpanStyles} ref={this.setLabelRef}>
+          <span style={labelSpanStyles}
+                ref={this.setLabelRef}
+                aria-hidden={true /* already labeled by the section aria-label */}
+          >
             {i18n.categories[id]}
           </span>
         </div>
@@ -206,7 +210,7 @@ export default class Category extends React.Component {
               emojiProps={emojiProps}
             />
           )}
-      </div>
+      </section>
     )
   }
 }

diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
@@ -173,12 +173,12 @@ const NimbleEmoji = (props) => {
 
   if (props.html) {
     style = _convertStyleToCSS(style)
-    return `<span style='${style}' ${
+    return `<button style='${style}' ${
       title ? `title='${title}'` : ''
-    } class='${className}'>${children || ''}</span>`
+    } class='${className}'>${children || ''}</button>`
   } else {
     return (
-      <span
+      <button
         key={props.emoji.id || props.emoji}
         onClick={(e) => _handleClick(e, props)}
         onMouseEnter={(e) => _handleOver(e, props)}
@@ -187,7 +187,7 @@ const NimbleEmoji = (props) => {
         className={className}
       >
         <span style={style}>{children}</span>
-      </span>
+      </button>
     )
   }
 }

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
@@ -18,6 +18,7 @@ import { PickerDefaultProps } from '../../utils/shared-default-props'
 
 const I18N = {
   search: 'Search',
+  emojilist: 'List of emoji',
   notfound: 'No Emoji Found',
   skintext: 'Choose your default skin tone',
   categories: {
@@ -518,9 +519,10 @@ export default class NimblePicker extends React.PureComponent {
           autoFocus={autoFocus}
         />
 
-        <div
+        <section
           ref={this.setScrollRef}
           className="emoji-mart-scroll"
+          aria-label={this.i18n.emojilist}
           onScroll={this.handleScroll}
         >
           {this.getCategories().map((category, i) => {
@@ -564,7 +566,7 @@ export default class NimblePicker extends React.PureComponent {
               />
             )
           })}
-        </div>
+        </section>
 
         {(showPreview || showSkinTones) && (
           <div className="emoji-mart-bar">