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 (techforwarren#23).

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;

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)}/>