Improved Algolia accessibility

Author: dcooney

components/molecules/AlgoliaSearch/AlgoliaSearch.module.css

@@ -9,7 +9,9 @@
     @apply relative;
 
     & .trigger {
-      @apply absolute left-0 top-0 w-full h-full z-10 cursor-text;
+      @apply absolute left-0 top-0 w-full h-full z-10 cursor-text overflow-hidden;
+
+      text-indent: -9999px;
     }
   }
 
@@ -20,6 +22,7 @@
     & input {
       @apply w-full p-10 pr-48 border border-tertiary-lighter rounded font-primary text-xs;
 
+      background: #fff;
       line-height: 1;
 
       &::-webkit-search-decoration,

components/molecules/AlgoliaSearch/components/SearchPlaceholder.js

@@ -11,7 +11,7 @@ import SearchIcon from './SearchIcon'
  * @param {object}   props               The component attributes as props.
  * @param {Function} props.toggleAlgolia Toggle the Search component.
  * @param {string}   props.query         The search query.
- * @return {Element}                     The SearchPlaceholder component.
+ * @return {Element} The SearchPlaceholder component.
  */
 export default function SearchPlaceholder({toggleAlgolia, query}) {
   return (
@@ -29,15 +29,17 @@ export default function SearchPlaceholder({toggleAlgolia, query}) {
               toggleAlgolia(true)
             }
           }}
-        />
+        >
+          <span>Click to start searching</span>
+        </div>
         <input
           tabIndex="-1"
           type="search"
           value={query}
           placeholder="Enter search term..."
           readOnly
         />
-        <button type="button" tabIndex="-1">
+        <button type="button" tabIndex="-1" disabled>
           <SearchIcon />
         </button>
       </div>