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 1/3] 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 30cbec017..e9585e690 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 12daf723e..875c59c14 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 b468ce3bc..3f613697e 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 1b8c12032..dbe552da1 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',

From f3cff33edafbe6ddb91d3882c55d2ebf8bedb5bb Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 10 Mar 2019 10:57:43 -0700
Subject: [PATCH 2/3] refactor, add code comment

---
 README.md                              | 4 ++--
 src/components/picker/nimble-picker.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e9585e690..a2b3ff87c 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,6 @@ 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',
@@ -73,7 +72,8 @@ categories: {
   symbols: 'Symbols',
   flags: 'Flags',
   custom: 'Custom',
-}
+},
+categorieslabel: 'Emoji categories', // Accessible title for the list of categories
 ```
 
 #### Sheet sizes
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index dbe552da1..d075061ba 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -20,7 +20,6 @@ const I18N = {
   search: 'Search',
   notfound: 'No Emoji Found',
   skintext: 'Choose your default skin tone',
-  categorieslabel: 'Emoji categories',
   categories: {
     search: 'Search Results',
     recent: 'Frequently Used',
@@ -34,6 +33,7 @@ const I18N = {
     flags: 'Flags',
     custom: 'Custom',
   },
+  categorieslabel: 'Emoji categories', // Accessible title for the list of categories
 }
 
 export default class NimblePicker extends React.PureComponent {

From 2fc78161168b01a76215d656e96ea97149a87b83 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 11 Mar 2019 18:55:58 -0700
Subject: [PATCH 3/3] fix nav button bg color

---
 css/emoji-mart.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 875c59c14..3e91a4258 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -78,7 +78,7 @@
 
 .emoji-mart-anchors svg,
 .emoji-mart-anchors img {
-  fill: currentColor;
+  fill: #858585;
   height: 18px;
   width: 18px;
 }