From 5052ecd399d206541f56501aa7b1b3226fc44ea1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 9 Mar 2019 13:03:00 -0800
Subject: [PATCH 1/5] fix: improve search/clear a11y

fixes #221
---
 README.md                              |  1 +
 css/emoji-mart.css                     | 21 ++++++++++++++---
 src/components/picker/nimble-picker.js |  1 +
 src/components/search.js               | 31 +++++++++++++++++++++-----
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 30cbec0..fc13c58 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,7 @@ import { Picker } from 'emoji-mart'
 #### I18n
 ```js
 search: 'Search',
+clear: 'Clear', // Accessible label on "clear" button
 notfound: 'No Emoji Found',
 skintext: 'Choose your default skin tone',
 categories: {
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 12daf72..d4ddbeb 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -100,14 +100,15 @@
   border-radius: 5px;
   border: 1px solid #d9d9d9;
   outline: 0;
+  -webkit-appearance: none;
 }
 
 .emoji-mart-search-icon {
   position: absolute;
-  top: 9px;
-  right: 16px;
+  top: 7px;
+  right: 11px;
   z-index: 2;
-  padding: 0;
+  padding: 2px 5px 1px;
   border: none;
   background: none;
 }
@@ -369,3 +370,17 @@
 .emoji-mart-skin-tone-4 { background-color: #bf8f68 }
 .emoji-mart-skin-tone-5 { background-color: #9b643d }
 .emoji-mart-skin-tone-6 { background-color: #594539 }
+
+/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+.emoji-mart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 1b8c120..bcbf100 100644
--- 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',
+  clear: 'Clear', // Accessible label on "clear" button
   notfound: 'No Emoji Found',
   skintext: 'Choose your default skin tone',
   categories: {
diff --git a/src/components/search.js b/src/components/search.js
index 19992dd..871aeda 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -4,12 +4,15 @@ import PropTypes from 'prop-types'
 import { search as icons } from '../svgs'
 import NimbleEmojiIndex from '../utils/emoji-index/nimble-emoji-index'
 
+let id = 0
+
 export default class Search extends React.PureComponent {
   constructor(props) {
     super(props)
     this.state = {
       icon: icons.search,
       isSearching: false,
+      id: ++id
     }
 
     this.data = props.data
@@ -59,28 +62,46 @@ export default class Search extends React.PureComponent {
     }
   }
 
+  clearIfNotSearching () {
+    const { isSearching } = this.state
+    if (!isSearching) {
+      this.clear()
+    }
+  }
+
   setRef(c) {
     this.input = c
   }
 
   render() {
-    var { i18n, autoFocus } = this.props
-    var { icon, isSearching } = this.state
+    const { i18n, autoFocus } = this.props
+    const { icon, id } = this.state
+
+    let inputId = `emoji-mart-search-${id}`
 
     return (
       <div className="emoji-mart-search">
         <input
+          id={inputId}
           ref={this.setRef}
-          type="text"
+          type="search"
           onChange={this.handleChange}
           placeholder={i18n.search}
           autoFocus={autoFocus}
         />
+        {/*
+          * Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+          * http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+          */}
+        <label
+          className="emoji-mart-sr-only"
+          htmlFor={inputId}
+        >{i18n.search}</label>
         <button
           className="emoji-mart-search-icon"
-          onClick={this.clear}
+          onClick={this.clearIfNotSearching}
           onKeyUp={this.handleKeyUp}
-          disabled={!isSearching}
+          aria-label={i18n.clear}
         >
           {icon()}
         </button>

From b0fee348c0d17b13ad156180e337912d9e8a5e94 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 9 Mar 2019 13:35:48 -0800
Subject: [PATCH 2/5] s/let/const/

---
 src/components/search.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/search.js b/src/components/search.js
index 871aeda..a3ec39f 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -76,8 +76,7 @@ export default class Search extends React.PureComponent {
   render() {
     const { i18n, autoFocus } = this.props
     const { icon, id } = this.state
-
-    let inputId = `emoji-mart-search-${id}`
+    const inputId = `emoji-mart-search-${id}`
 
     return (
       <div className="emoji-mart-search">

From ef71101cd6bb0ebb7538615a6ccaa1edad62cb9c Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 10 Mar 2019 09:54:12 -0700
Subject: [PATCH 3/5] fix prettier

---
 src/components/search.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/search.js b/src/components/search.js
index a3ec39f..cfaf3b1 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -12,7 +12,7 @@ export default class Search extends React.PureComponent {
     this.state = {
       icon: icons.search,
       isSearching: false,
-      id: ++id
+      id: ++id,
     }
 
     this.data = props.data
@@ -62,7 +62,7 @@ export default class Search extends React.PureComponent {
     }
   }
 
-  clearIfNotSearching () {
+  clearIfNotSearching() {
     const { isSearching } = this.state
     if (!isSearching) {
       this.clear()
@@ -92,10 +92,9 @@ export default class Search extends React.PureComponent {
           * Use a <label> in addition to the placeholder for accessibility, but place it off-screen
           * http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
           */}
-        <label
-          className="emoji-mart-sr-only"
-          htmlFor={inputId}
-        >{i18n.search}</label>
+        <label className="emoji-mart-sr-only" htmlFor={inputId}>
+          {i18n.search}
+        </label>
         <button
           className="emoji-mart-search-icon"
           onClick={this.clearIfNotSearching}

From bd172943d28982d751cfb6b9c7a7c731728bace1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 10 Mar 2019 10:35:07 -0700
Subject: [PATCH 4/5] fix webkit CSS, fix clear button

---
 css/emoji-mart.css       |  8 ++++++++
 src/components/search.js | 13 ++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index d4ddbeb..9a73f5a 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -100,6 +100,14 @@
   border-radius: 5px;
   border: 1px solid #d9d9d9;
   outline: 0;
+}
+
+.emoji-mart-search input::-webkit-search-decoration,
+.emoji-mart-search input::-webkit-search-cancel-button,
+.emoji-mart-search input::-webkit-search-results-button,
+.emoji-mart-search input::-webkit-search-results-decoration {
+  /* remove webkit/blink styles for <input type="search">
+   * via https://stackoverflow.com/a/9422689 */
   -webkit-appearance: none;
 }
 
diff --git a/src/components/search.js b/src/components/search.js
index cfaf3b1..67d8c56 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -49,6 +49,7 @@ export default class Search extends React.PureComponent {
   clear() {
     if (this.input.value == '') return
     this.input.value = ''
+    this.input.focus()
     this.search('')
   }
 
@@ -62,20 +63,13 @@ export default class Search extends React.PureComponent {
     }
   }
 
-  clearIfNotSearching() {
-    const { isSearching } = this.state
-    if (!isSearching) {
-      this.clear()
-    }
-  }
-
   setRef(c) {
     this.input = c
   }
 
   render() {
     const { i18n, autoFocus } = this.props
-    const { icon, id } = this.state
+    const { icon, isSearching, id } = this.state
     const inputId = `emoji-mart-search-${id}`
 
     return (
@@ -97,9 +91,10 @@ export default class Search extends React.PureComponent {
         </label>
         <button
           className="emoji-mart-search-icon"
-          onClick={this.clearIfNotSearching}
+          onClick={this.clear}
           onKeyUp={this.handleKeyUp}
           aria-label={i18n.clear}
+          disabled={!isSearching}
         >
           {icon()}
         </button>

From 27f1b8cd63d277c567120df258adf3de31eef5f5 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 10 Mar 2019 11:24:28 -0700
Subject: [PATCH 5/5] improve webkit search input CSS

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

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 9a73f5a..7c560ec 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -102,6 +102,7 @@
   outline: 0;
 }
 
+.emoji-mart-search input,
 .emoji-mart-search input::-webkit-search-decoration,
 .emoji-mart-search input::-webkit-search-cancel-button,
 .emoji-mart-search input::-webkit-search-results-button,