Merge pull request #188 from MITLibraries/gdt-318-improve-form-a11y

Improve accessibility of search form

Author: jazairi

app/assets/stylesheets/partials/_filters.scss

@@ -1,4 +1,7 @@
 #filters {
+  @media (max-width: $bp-screen-md) {
+    margin-bottom: 1.2rem;
+  }
   details.filter-category {
     position: relative;
     margin-bottom: 0.5em;

app/assets/stylesheets/partials/_panels.scss

@@ -111,7 +111,7 @@
     }
   }
   .list-filter-summary {
-    padding-top: 1rem;
+    padding-top: 0.8rem;
     border-top: 1px solid $black;
   }
   .hd-search-summary {

app/assets/stylesheets/partials/_results.scss

@@ -1,5 +1,8 @@
 .top-space {
-  margin-top: 2.4rem;
+  margin-top: 1.2rem;
+  @media (min-width: $bp-screen-md) {
+    margin-top: 2.4rem;
+  }
 }
 
 .wrap-results {

app/assets/stylesheets/partials/_search.scss

@@ -6,7 +6,7 @@
 .basic-search {
   background-color: #989898;
   margin-bottom: 0rem;
-  padding: 2.4rem 2rem 1rem 2.4rem;
+  padding: 2.4rem 2rem 1.6rem 2rem;
 
   details {
     &:first-of-type {
@@ -35,12 +35,7 @@
     width: 100%;
     margin-bottom: .8rem;
     padding: 6px 12px;
-
-    @media (min-width: $bp-screen-sm) {
-      display: inline-block;
-      width: 80%;
-      margin-bottom: 0;
-    }
+    margin-bottom: 0;
   }
 
   summary {
@@ -112,12 +107,9 @@
   }
 
   .basic-search-submit {
-    @media (min-width: $bp-screen-sm) {
-      display: inline-block;
-      width: 18%;
-    }
+    width: 150px;
+    margin-top: 0.8rem;
     .btn {
-      border-radius: 0;
       width: 100%;
     }
   }

app/views/search/_form.html.erb

@@ -1,10 +1,4 @@
 <%
-# Conditional input label depends on whether a search has already happened.
-label = "Search the MIT Libraries"
-if params[:q]
-  label = "You searched for"
-end
-
 # Initial form setup is determined by the advanced parameter. Thereafter it is altered by javascript.
 advanced_label = "Search by title, author, etc."
 advanced_label_class = "closed"
@@ -34,12 +28,9 @@ end
 <form id="basic-search" class="form-horizontal basic-search" action="<%= results_path %>" method="get" role="search">
   <div class="form-group">
     <input id="basic-search-main" type="search"
-           class="field field-text basic-search-input <%= "required" if search_required %>" name="q" title="<%= label %>"
-           placeholder="Enter your search"
+           class="field field-text basic-search-input <%= "required" if search_required %>" name="q"
+           title="Keyword anywhere" placeholder="Enter your search"
            value="<%= params[:q] %>" <%= 'required="required" aria-required="true"' if search_required %>>
-    <div class="basic-search-submit">
-      <button type="submit" class="btn button-primary">Search</button>
-    </div>
 
     <% if Flipflop.enabled?(:gdt) %>
       <details id="geobox-search-panel" <%= "open" if params[:geobox] == "true" %>>
@@ -220,6 +211,10 @@ end
       </div>
     </details>
   </div>
+
+  <div class="basic-search-submit">
+    <button type="submit" class="btn button-primary">Search</button>
+  </div>
 </form>
 
 <% if Flipflop.enabled?(:boolean_picker) %>