Improve accessibility of search form

Why these changes are being introduced:

Accessibility testing revealed that the search button is difficult
for screen reader users to locate, and that the `title` attribute for
the keyword search input is not useful.

Relevant ticket(s):

* [GDT-318](https://mitlibraries.atlassian.net/browse/GDT-318)

How this addresses that need:

This changes the keyword `title` to 'keyword anywhere' and moves
the search button to the bottom of the form, after all of the
advanced search dropdowns. It also updates some corresponding
CSS, including removing the `border-radius` override for the `btn`
class, so the search button looks more like a button.

Side effects of this change:

Fixed margin/padding for results summary panel and mobile filter
toggle. (This is unrelated to this change, but I noticed while
testing out the changes that the spacing looked odd.)

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) %>