Merge pull request missive#281 from nolanlawson/nolan/issue-221

fix: improve search/clear a11y

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: {

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;
+}
+
+

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: {

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,44 @@ 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
+    const 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>