Add a label for the search input

- Properly label the input, to improve accessibility, but visually hide it to
  maintain the design, which uses a placeholder to indicate use
- Uses the hide content technique from The Accessibility Project:
  http://a11yproject.com/posts/how-to-hide-content/
- Fixes #415

app/assets/stylesheets/administrate/application.scss

@@ -10,3 +10,4 @@
 @import "library/**/*";
 @import "base/**/*";
 @import "components/**/*";
+@import "utilities/**/*";

app/assets/stylesheets/administrate/utilities/_visually-hidden.scss

@@ -0,0 +1,8 @@
+.visually-hidden {
+  @include size(1px);
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}

app/views/administrate/application/index.html.erb

@@ -30,10 +30,12 @@ It renders the `_table` partial to display details about the resources.
     <span class="search__icon">
       <%= inline_svg "administrate/search.svg" %>
     </span>
+    <label class="visually-hidden" for="search-input">Search</label>
     <input
       type="text"
       name="search"
       class="search__input"
+      id="search-input"
       placeholder="Search"
       value="<%= search_term %>"
     />