fix: make categories into accessible nav buttons

fixes #219

README.md

@@ -60,6 +60,7 @@ import { Picker } from 'emoji-mart'
 search: 'Search',
 notfound: 'No Emoji Found',
 skintext: 'Choose your default skin tone',
+categorieslabel: 'Emoji categories', // Accessible title for the list of categories
 categories: {
   search: 'Search Results',
   recent: 'Frequently Used',

css/emoji-mart.css

@@ -49,6 +49,10 @@
   padding: 12px 4px;
   overflow: hidden;
   transition: color .1s ease-out;
+  margin: 0;
+  box-shadow: none;
+  background: none;
+  border: none;
 }
 .emoji-mart-anchor:hover,
 .emoji-mart-anchor-selected {

src/components/anchors.js

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

src/components/picker/nimble-picker.js

@@ -20,6 +20,7 @@ const I18N = {
   search: 'Search',
   notfound: 'No Emoji Found',
   skintext: 'Choose your default skin tone',
+  categorieslabel: 'Emoji categories',
   categories: {
     search: 'Search Results',
     recent: 'Frequently Used',