Add more skip links for ease of tab navigation

Why these changes are being introduced:

This application has many focusable elements, and it may be helpful
to users navigating with keyboards or screen readers if we provide
links to skip to different sections.

Relevant ticket(s):

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

How this addresses that need:

This adds the following skip links to the `_skip_links` partial:
* All views: nav, search form
* Results: results list, filter sidebar
* Record: record metadata

It also adds `.skip-link` rules to our SCSS, copied from the
`#skip` rules in the style guide with two changes:
* The `width: 0` rule has been removed in a step towards partial
Safari support, as Safari will not focus on elements with this
rule.
* The color of skip links on focus is now white, as the current
blue-on-black is a contrast error.

Safari has a significant focus bug that Apple seems unlikely to fix.
[This article](https://itnext.io/fixing-focus-for-safari-b5916fef1064)
details the problem and provides a polyfill that solves it. As this
bug likely affects all of our applications, we should incorporate
that polyfill in the style guide. I've opened [ENGX-260](https://mitlibraries.atlassian.net/browse/ENGX-260)
to do so.

Side effects of this change:

* Some IDs have been added to top-level elements to make them
selectable.
* While working on this, I realized that VoiceOver doesn't recognize
the filter labels as disclosure triangles, so even when they are
closed, it tabs through every available filter. I've fixed this
in a subsequent commit.
* There is an open question as to whether this is too many skip
links. [WebAIM's guidance on skip links](https://webaim.org/techniques/skipnav/#multiple)
suggests that one is optimal, but more than one may be necessary
in some cases. Whether our use case necessitates them is somewhat
unclear, as are the best practices for how many links to provide
if you are providing multiple. I plan to discuss this further with
Darcy in UX review. If we can't come to a decision, it would be a
good question for DAS.

Author: jazairi

app/assets/stylesheets/partials/_shared.scss

@@ -39,3 +39,23 @@
     }
   }
 }
+
+.skip-link {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  height: 0;
+  color: $gray-l2;
+  background-color: $black;
+  border-bottom: 2px solid $success;
+
+  &:focus {
+    position: relative;
+    display: block;
+    height: auto;
+    color: $white;
+    width: 100%;
+    padding: 5px 2%;
+  }
+}

app/views/layouts/_site_nav.html.erb

@@ -1,7 +1,7 @@
 <div class="wrap-outer-header-local layout-band">
   <div class="wrap-header-local">
     <div class="wrap-local-nav">
-      <nav class="local-nav" aria-label="Main menu">
+      <nav class="local-nav" id="main-menu" aria-label="Main menu">
         <%= nav_link_to("Home", root_path) %>
         <% if Flipflop.enabled?(:gdt) %>
           <div class="wrap-gis-links">

app/views/layouts/_skip_links.html.erb

@@ -1 +1,11 @@
-<a id="skip" class="sr sr-focusable" href="#content-main">Skip to main content</a>
+<a class="skip-link sr sr-focusable" href="#main-menu">Skip to main menu</a>
+<a class="skip-link sr sr-focusable" href="#basic-search">Skip to search form</a>
+<% if current_page?(results_path) %>
+  <a class="skip-link sr sr-focusable" href="#results">Skip to results</a>
+  <% if @filters.present? %>
+    <a class="skip-link sr sr-focusable" href="#filters">Skip to search filters</a>
+  <% end %>
+<% end %>
+<% if controller.controller_name == 'record' && controller.action_name == 'view' %>
+  <a class="skip-link sr sr-focusable" href="#full-record">Skip to metadata</a>
+<% end %>

app/views/record/_record.html.erb

@@ -1,6 +1,5 @@
-<div class="gridband layout-3q1q wrap-full-record">
+<div id="full-record" class="gridband layout-3q1q wrap-full-record">
   <div class="col3q box-content region full-record" data-region="Full record">
-
     <h2 class="record-title">
       <span class="sr">Title: </span>
       <% if @record['title'].present? %>

app/views/record/_record_geo.html.erb

@@ -1,4 +1,4 @@
-<div class="gridband layout-3q1q wrap-full-record">
+<div id="full-record" class="gridband layout-3q1q wrap-full-record">
   <div class="col3q box-content region full-record" data-region="Full record">
     <h2 class="record-title">
       <span class="sr">Title: </span>