Merge pull request #282 from nolanlawson/nolan/issue-219

fix: make categories into accessible nav buttons

README.md

@@ -73,7 +73,8 @@ categories: {
   symbols: 'Symbols',
   flags: 'Flags',
   custom: 'Custom',
-}
+},
+categorieslabel: 'Emoji categories', // Accessible title for the list of categories
 ```
 
 #### Sheet sizes

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 {
@@ -74,7 +78,7 @@
 
 .emoji-mart-anchors svg,
 .emoji-mart-anchors img {
-  fill: currentColor;
+  fill: #858585;
   height: 18px;
   width: 18px;
 }

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

@@ -34,6 +34,7 @@ const I18N = {
     flags: 'Flags',
     custom: 'Custom',
   },
+  categorieslabel: 'Emoji categories', // Accessible title for the list of categories
 }
 
 export default class NimblePicker extends React.PureComponent {