From e4c471b1dc1255bf8142761ab41885aa818cb232 Mon Sep 17 00:00:00 2001
From: Erik Ostrom <erik@echographia.com>
Date: Mon, 21 Oct 2019 12:09:40 -0500
Subject: [PATCH] Search bar accessibility improvements.

- all inputs should have labels
  - eliminated placeholder, which should only be used for examples
  - simulated placeholder interaction (disappear on input)
  - for usability, I don't think we should hide the label, but I'm
    not trying to redesign here
- focus highlight for locate button now surrounds the whole icon
  - this shifts the button's position slightly but I think it's fine
- added alt text to locate icon

Also removed `console.log` which probably shouldn't be in production.

This fixes some of the low-hanging WCAG fruit (#23).
---
 src/App.scss     | 27 +++++++++++----------------
 src/SearchBar.js | 11 +++++------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index e92aa97..abb39f3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -126,6 +126,16 @@ html, body, #root, .app {
     width: 70%;
   }
 
+  label[for=zipInput] {
+    color: white;
+    position: fixed;
+    font-size: 24px;
+  }
+
+  [data-has-input=true] label[for=zipInput] {
+    color: transparent;
+  }
+
   #zipInput{
     width: 100%;
     height: 30%;
@@ -141,7 +151,7 @@ html, body, #root, .app {
 
   #locateMe {
     height: 35px;
-    width: 35px;
+    padding: 0;
     color: white;
     background-color: #232444;
     border: none;
@@ -153,21 +163,6 @@ html, body, #root, .app {
 
 }
 
-
-
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: white;
-  opacity: 1; /* Firefox */
-}
-
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  color: white;
-}
-
-::-ms-input-placeholder { /* Microsoft Edge */
-  color: white;
-}
-
 .eventList{
   background-color: white;
   height: 500px;
diff --git a/src/SearchBar.js b/src/SearchBar.js
index f69a41b..6250025 100644
--- a/src/SearchBar.js
+++ b/src/SearchBar.js
@@ -6,12 +6,11 @@ import locateImage from './img/icon_512x512.png';
 
 
 export function SearchBar(props){
-  const[input, setInput] = useState(props.currZip);
+  const [input, setInput] = useState(props.currZip || '');
 
   function onlySetNumbers(event){
     let baseValue = event.target.value;
     let replacedVal = baseValue.replace(/\D*/g, '')
-    console.log(`baseValue: ${baseValue}, replacedVal: ${replacedVal}`);
     setInput(replacedVal)
   }
 
@@ -48,14 +47,14 @@ export function SearchBar(props){
     History.push(window.location.pathname+'?zip='+input);
   }
 
-
   return(
     <div className={(props.events != null ? "searchBar activeList" : "searchBar") + (isMobile ? " mobileSearch" : "")}>
       <div className="userInput">
-        <form onSubmit= {onSubmit} id = "zipForm">
-          <input type="text" id="zipInput" value={input} onChange={onlySetNumbers} placeholder="ZIP" required minLength="5" maxLength="5"></input>
+        <form onSubmit= {onSubmit} id = "zipForm" data-has-input={!!input.length}>
+          <label for="zipInput">ZIP</label>
+          <input type="text" id="zipInput" value={input} onInput={onlySetNumbers} required minLength="5" maxLength="5"></input>
         </form>
-        <button id="locateMe" onClick={geolocate}><img src={locateImage}></img></button>
+        <button id="locateMe" onClick={geolocate}><img src={locateImage} alt="Use my location"></img></button>
       </div>
       {props.events !== null && !isMobile &&
         <EventList events={props.events} locFilt={props.locFilt} updatedHover={(item) => props.updatedHover(item)}/>