From e77c63bc9a5e58c5f94bc89485e90c9579f29097 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 9 Mar 2019 13:43:42 -0800
Subject: [PATCH] fix: make categories into accessible nav buttons

fixes #219
---
 README.md                              | 1 +
 css/emoji-mart.css                     | 4 ++++
 src/components/anchors.js              | 9 +++++----
 src/components/picker/nimble-picker.js | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 30cbec0..e9585e6 100644
--- a/README.md
+++ b/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',
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 12daf72..875c59c 100644
--- a/css/emoji-mart.css
+++ b/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 {
diff --git a/src/components/anchors.js b/src/components/anchors.js
index b468ce3..3f61369 100644
--- a/src/components/anchors.js
+++ b/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>
     )
   }
 }
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 1b8c120..dbe552d 100644
--- a/src/components/picker/nimble-picker.js
+++ b/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',