120 Skiplinks (#303)

* Adds skiplinks functionality and styles
* refactor sr only classes
* removed old skipnav component and updated skiplinks focus index

core/scss/components/index.scss

@@ -20,4 +20,4 @@
   'main-nav/index',
   'quote/index',
   'site-search/index',
-  'skipnav/index';
+  'skiplinks/index';

core/scss/components/site-search/_site-search.scss

@@ -30,7 +30,7 @@
 }
 
 .su-site-search__sr-label {
-  @include sr-only;
+  @include hide-visually;
 }
 
 .su-site-search__submit {

core/scss/components/skiplinks/_skiplinks.scss

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+
+//
+// Skiplinks
+//
+// For providing a link at the top of the page which jumps
+// the user down to an anchor or target at the beginning of the main content.
+//
+// Gives screen readers and keyboard users the same capability of going directly
+// to the main content as sighted, mouse users.
+// of the main content. Learn more at <a href="https://webaim.org/techniques/skipnav">https://webaim.org/techniques/skipnav</a>.
+//
+// To test this component's functionality, place your cursor on "Example" and click.
+// Then, press the tab key. The Skiplinks link will slide into view at the top
+// lefthand corner of the screen. Press the return key (or click on the link) to
+// skip to the targeted element.
+//
+// Markup: <header>
+//   <a href="#main-content" class="su-skiplinks">Skip to main content</a>
+// </header>
+//  <main>
+//   <h2 id="main-content" class="su-sr-only-text" tabindex="-1">Main Content</h2>
+// </main>
+//
+//
+//
+// Style guide: Components.Skiplinks
+//
+.su-skiplinks {
+  @include skiplinks;
+}

core/scss/components/skipnav/index.scss → core/scss/components/skiplinks/index.scss

@@ -5,4 +5,4 @@
 ///
 
 @import
-  'skipnav';
+  'skiplinks';

core/scss/core/helpers/_sr-only-element.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+//
+// Screen Reader Only Element
+//
+// Hides an element visually while still allowing the content to be accessible
+// to assistive technology (e.g. screen readers). Passing "unhide" will reverse
+// the affects of the hiding, which is handy for showing the element on focus.
+//
+// Style guide: Core.Helpers.sr-only-element
+//
+.su-sr-only-element {
+  @include hide-visually;
+
+  &:active,
+  &:focus {
+    @include hide-visually("unhide");
+  }
+}

core/scss/core/helpers/_sr-only-text.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+//
+// Screen Reader Only Text
+//
+// Hides the text in an element, commonly used to show an image instead.
+// Some elements will need block-level styles applied.
+//
+// Style guide: Core.Helpers.sr-only
+//
+.su-sr-only-text {
+  @include hide-text;
+}

core/scss/core/helpers/index.scss

@@ -5,4 +5,5 @@
 ///
 
 @import
-  'sr-only';
+  'sr-only-element',
+  'sr-only-text';

core/scss/elements/input/_input.scss

@@ -74,7 +74,7 @@ fieldset {
 [type=radio] {
   // The actual input element is only visible to screen readers, because
   // all visual styling is done via the label.
-  @include sr-only;
+  @include hide-visually;
 
   .lt-ie9 & {
     border: 0;

core/scss/utilities/mixins/accessibility/_skiplinks.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+
+//
+// @skiplinks
+//
+// For providing a link at the top of the page which jumps
+// the user down to an anchor or target at the beginning of the main content.
+//
+// Gives screen readers and keyboard users the same capability of going directly
+// to the main content as sighted, mouse users.
+// of the main content. Learn more at https://webaim.org/techniques/skipnav.
+//
+// Style guide: Mixins.Accessibility.skiplinks
+//
+@mixin skiplinks {
+  @media print {
+    display: none;
+  }
+
+  @include padding(0);
+  background-color: $color-black;
+  color: $color-white;
+  font-family: $font-sans;
+  font-size: .75em;
+  font-weight: 400;
+  left: .8em;
+  min-height: 1px;
+  position: absolute;
+  text-decoration: none;
+  top: -500px;
+  transition-duration: .25s;
+  transition-property: top;
+  transition-timing-function: ease-in-out;
+
+  &,
+  &:hover,
+  &:visited {
+    color: $color-white;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  &:active,
+  &:focus {
+    @include padding(.4em .8em);
+    border: 1px solid $color-cool-grey;
+    border-radius: $border-radius;
+    height: auto;
+    left: .8em;
+    position: fixed;
+    top: .8em;
+    width: auto;
+    z-index: 11222;
+  }
+}

core/scss/utilities/mixins/accessibility/index.scss

@@ -10,5 +10,4 @@
 
 @import
   'accessibly-hidden',
-  'skipnav',
-  'sr-only';
+  'skiplinks';