From 75e451db1d2fa88dd61300624b662c14a13af2e7 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 28 Feb 2019 15:16:17 -0800
Subject: [PATCH 01/13] adds skiplinks functionality and styles

---
 core/css/decanter.css                         | 37 ++++++++++++
 core/scss/components/index.scss               |  1 +
 .../scss/components/skiplinks/_skiplinks.scss | 19 +++++++
 core/scss/components/skiplinks/index.scss     |  8 +++
 .../mixins/accessibility/_skiplinks.scss      | 56 +++++++++++++++++++
 .../utilities/mixins/accessibility/index.scss |  1 +
 .../components/skiplinks/skiplinks.json       |  3 +
 .../components/skiplinks/skiplinks.twig       |  7 +++
 8 files changed, 132 insertions(+)
 create mode 100644 core/scss/components/skiplinks/_skiplinks.scss
 create mode 100644 core/scss/components/skiplinks/index.scss
 create mode 100644 core/scss/utilities/mixins/accessibility/_skiplinks.scss
 create mode 100644 core/templates/components/skiplinks/skiplinks.json
 create mode 100644 core/templates/components/skiplinks/skiplinks.twig

diff --git a/core/css/decanter.css b/core/css/decanter.css
index afcfa8a01..c7b9dfc9f 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -7719,6 +7719,43 @@ a {
     outline: #aaa solid 3px;
     outline: -webkit-focus-ring-color auto 5px; }
 
+.su-skiplinks {
+  padding: 0;
+  background-color: #2e2d29;
+  color: #ffffff;
+  font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-size: .75em;
+  font-weight: 400;
+  left: .8em;
+  min-height: 1px;
+  position: absolute;
+  text-decoration: none;
+  top: -500px;
+  -webkit-transition-duration: .25s;
+          transition-duration: .25s;
+  -webkit-transition-property: top;
+  transition-property: top;
+  -webkit-transition-timing-function: ease-in-out;
+          transition-timing-function: ease-in-out; }
+  @media print {
+    .su-skiplinks {
+      display: none; } }
+  .su-skiplinks, .su-skiplinks:hover, .su-skiplinks:visited {
+    color: #ffffff;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 1px; }
+  .su-skiplinks:active, .su-skiplinks:focus {
+    padding: 0.4em 0.8em;
+    border: 1px solid #4d4f53;
+    border-radius: 3px;
+    height: auto;
+    left: .8em;
+    position: fixed;
+    top: .8em;
+    width: auto; }
+
 .su-skipnav {
   background: transparent;
   color: #2e2d29;
diff --git a/core/scss/components/index.scss b/core/scss/components/index.scss
index 2235b2f74..da7009cb5 100644
--- a/core/scss/components/index.scss
+++ b/core/scss/components/index.scss
@@ -19,4 +19,5 @@
   'lockup/index',
   'quote/index',
   'site-search/index',
+  'skiplinks/index',
   'skipnav/index';
diff --git a/core/scss/components/skiplinks/_skiplinks.scss b/core/scss/components/skiplinks/_skiplinks.scss
new file mode 100644
index 000000000..115a431ba
--- /dev/null
+++ b/core/scss/components/skiplinks/_skiplinks.scss
@@ -0,0 +1,19 @@
+@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.
+//
+// Markup: ../../templates/components/skiplinks/skiplinks.twig
+//
+// Style guide: Components.Skiplinks
+//
+.su-skiplinks {
+  @include skiplinks;
+}
diff --git a/core/scss/components/skiplinks/index.scss b/core/scss/components/skiplinks/index.scss
new file mode 100644
index 000000000..90bfb7096
--- /dev/null
+++ b/core/scss/components/skiplinks/index.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+@import
+  'skiplinks';
diff --git a/core/scss/utilities/mixins/accessibility/_skiplinks.scss b/core/scss/utilities/mixins/accessibility/_skiplinks.scss
new file mode 100644
index 000000000..a3db3842a
--- /dev/null
+++ b/core/scss/utilities/mixins/accessibility/_skiplinks.scss
@@ -0,0 +1,56 @@
+@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;
+  }
+}
diff --git a/core/scss/utilities/mixins/accessibility/index.scss b/core/scss/utilities/mixins/accessibility/index.scss
index a88d8b1bc..45c5f3d3f 100644
--- a/core/scss/utilities/mixins/accessibility/index.scss
+++ b/core/scss/utilities/mixins/accessibility/index.scss
@@ -10,5 +10,6 @@
 
 @import
   'accessibly-hidden',
+  'skiplinks',
   'skipnav',
   'sr-only';
diff --git a/core/templates/components/skiplinks/skiplinks.json b/core/templates/components/skiplinks/skiplinks.json
new file mode 100644
index 000000000..0db3279e4
--- /dev/null
+++ b/core/templates/components/skiplinks/skiplinks.json
@@ -0,0 +1,3 @@
+{
+
+}
diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
new file mode 100644
index 000000000..835a83811
--- /dev/null
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -0,0 +1,7 @@
+<header>
+  <a href="#main-content" class="su-skiplinks">{{ text|default('Skip to content') }}</a>
+</header>
+
+<main>
+  <h2 id="main-content" class="su-sr-only" tabindex="-1">Main Content</h2>
+</main>

From 1ce3a10caca560fb6ed1b25293daf1e1f859c9b0 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Thu, 28 Feb 2019 15:40:38 -0800
Subject: [PATCH 02/13] refactor sr only classes

---
 core/css/decanter.css                         | 40 ++++++++++++++-----
 .../components/site-search/_site-search.scss  |  2 +-
 core/scss/core/helpers/_sr-only-element.scss  | 19 +++++++++
 core/scss/core/helpers/_sr-only-text.scss     | 13 ++++++
 core/scss/core/helpers/_sr-only.scss          | 13 ------
 core/scss/core/helpers/index.scss             |  3 +-
 core/scss/elements/input/_input.scss          |  2 +-
 .../mixins/accessibility/_sr-only.scss        | 22 ----------
 .../utilities/mixins/accessibility/index.scss |  3 +-
 .../components/skiplinks/skiplinks.twig       |  2 +-
 core/templates/elements/input/input.twig      |  4 +-
 11 files changed, 70 insertions(+), 53 deletions(-)
 create mode 100644 core/scss/core/helpers/_sr-only-element.scss
 create mode 100644 core/scss/core/helpers/_sr-only-text.scss
 delete mode 100644 core/scss/core/helpers/_sr-only.scss
 delete mode 100644 core/scss/utilities/mixins/accessibility/_sr-only.scss

diff --git a/core/css/decanter.css b/core/css/decanter.css
index c7b9dfc9f..802b86032 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -1525,15 +1525,31 @@ template {
   src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype");
   font-weight: 300; }
 
-.su-sr-only {
+.su-sr-only-element {
   border: 0;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
   height: 1px;
   overflow: hidden;
+  padding: 0;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
-  padding: 0; }
+  width: 1px; }
+  .su-sr-only-element:active, .su-sr-only-element:focus {
+    clip: auto;
+    -webkit-clip-path: none;
+            clip-path: none;
+    height: auto;
+    overflow: visible;
+    position: static;
+    white-space: inherit;
+    width: auto; }
+
+.su-sr-only-text {
+  overflow: hidden;
+  text-indent: 101%;
+  white-space: nowrap; }
 
 html {
   -webkit-box-sizing: border-box;
@@ -1636,13 +1652,15 @@ fieldset {
 [type="checkbox"],
 [type="radio"] {
   border: 0;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
   height: 1px;
   overflow: hidden;
+  padding: 0;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
-  padding: 0; }
+  width: 1px; }
   .lt-ie9 [type=checkbox], .lt-ie9
   [type=radio] {
     border: 0;
@@ -7686,13 +7704,15 @@ a {
 
 .su-site-search__sr-label {
   border: 0;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
   height: 1px;
   overflow: hidden;
+  padding: 0;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
-  padding: 0; }
+  width: 1px; }
 
 .su-site-search__submit {
   padding: 0;
diff --git a/core/scss/components/site-search/_site-search.scss b/core/scss/components/site-search/_site-search.scss
index 8bbb0b25f..cf2ea066b 100644
--- a/core/scss/components/site-search/_site-search.scss
+++ b/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 {
diff --git a/core/scss/core/helpers/_sr-only-element.scss b/core/scss/core/helpers/_sr-only-element.scss
new file mode 100644
index 000000000..fa05c50bc
--- /dev/null
+++ b/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");
+  }
+}
diff --git a/core/scss/core/helpers/_sr-only-text.scss b/core/scss/core/helpers/_sr-only-text.scss
new file mode 100644
index 000000000..20bd239f9
--- /dev/null
+++ b/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;
+}
diff --git a/core/scss/core/helpers/_sr-only.scss b/core/scss/core/helpers/_sr-only.scss
deleted file mode 100644
index e1bd4eac2..000000000
--- a/core/scss/core/helpers/_sr-only.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@charset "UTF-8";
-
-//
-// @sr-only
-//
-// Hides piece of content from the screen but keeps in the DOM for screen
-// readers.
-//
-// Style guide: Core.Helpers.sr-only
-//
-.su-sr-only {
-  @include sr-only;
-}
diff --git a/core/scss/core/helpers/index.scss b/core/scss/core/helpers/index.scss
index 49d4e98d3..b22fb86a0 100644
--- a/core/scss/core/helpers/index.scss
+++ b/core/scss/core/helpers/index.scss
@@ -5,4 +5,5 @@
 ///
 
 @import
-  'sr-only';
+  'sr-only-element',
+  'sr-only-text';
diff --git a/core/scss/elements/input/_input.scss b/core/scss/elements/input/_input.scss
index a6fd08ffe..469609b00 100644
--- a/core/scss/elements/input/_input.scss
+++ b/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;
diff --git a/core/scss/utilities/mixins/accessibility/_sr-only.scss b/core/scss/utilities/mixins/accessibility/_sr-only.scss
deleted file mode 100644
index 7b6cb3d1b..000000000
--- a/core/scss/utilities/mixins/accessibility/_sr-only.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@charset "UTF-8";
-
-//
-// @sr-only
-//
-// Screen reader only content hiding helper.
-//
-// See https://a11yproject.com/posts/how-to-hide-content/
-//
-// Style guide: Mixins.Accessibility.sr-only
-//
-@mixin sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-
-  @include padding(0);
-}
diff --git a/core/scss/utilities/mixins/accessibility/index.scss b/core/scss/utilities/mixins/accessibility/index.scss
index 45c5f3d3f..c32e2daa7 100644
--- a/core/scss/utilities/mixins/accessibility/index.scss
+++ b/core/scss/utilities/mixins/accessibility/index.scss
@@ -11,5 +11,4 @@
 @import
   'accessibly-hidden',
   'skiplinks',
-  'skipnav',
-  'sr-only';
+  'skipnav';
diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index 835a83811..e4099c30d 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -3,5 +3,5 @@
 </header>
 
 <main>
-  <h2 id="main-content" class="su-sr-only" tabindex="-1">Main Content</h2>
+  <h2 id="main-content" class="su-sr-only-text" tabindex="-1">Main Content</h2>
 </main>
diff --git a/core/templates/elements/input/input.twig b/core/templates/elements/input/input.twig
index e0901e209..25209007b 100644
--- a/core/templates/elements/input/input.twig
+++ b/core/templates/elements/input/input.twig
@@ -1,6 +1,6 @@
 <h2>Checkboxes</h2>
 <fieldset class="su-fieldset-inputs">
-  <legend class="su-sr-only">Stanford Presidents</legend>
+  <legend class="su-sr-only-element">Stanford Presidents</legend>
   <ul class="su-list-unstyled">
     <li>
       <input id="casper" type="checkbox" name="stanford-presidents-1" value="casper" checked>
@@ -23,7 +23,7 @@
 <!-- Radio Buttons ------------------------------>
 <h2>Radio Buttons</h2>
 <fieldset class="su-fieldset-inputs">
-  <legend class="su-sr-only">Stanford Provosts</legend>
+  <legend class="su-sr-only-element">Stanford Provosts</legend>
   <ul class="su-list-unstyled">
     <li>
       <input id="lieberman" type="radio" checked name="stanford-provosts-1" value="lieberman">

From d2c22161d15397b5ccef5a35978ba5ffe55901fb Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Fri, 1 Mar 2019 10:43:52 -0800
Subject: [PATCH 03/13] removed old skipnav component and updated skiplinks
 focus index

---
 core/css/decanter.css                         | 22 ++------------
 core/scss/components/index.scss               |  3 +-
 core/scss/components/skipnav/_skipnav.scss    | 16 ----------
 core/scss/components/skipnav/index.scss       |  8 -----
 .../mixins/accessibility/_skiplinks.scss      |  1 +
 .../mixins/accessibility/_skipnav.scss        | 29 -------------------
 .../utilities/mixins/accessibility/index.scss |  3 +-
 7 files changed, 5 insertions(+), 77 deletions(-)
 delete mode 100644 core/scss/components/skipnav/_skipnav.scss
 delete mode 100644 core/scss/components/skipnav/index.scss
 delete mode 100644 core/scss/utilities/mixins/accessibility/_skipnav.scss

diff --git a/core/css/decanter.css b/core/css/decanter.css
index 802b86032..39024e0b0 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -7774,24 +7774,6 @@ a {
     left: .8em;
     position: fixed;
     top: .8em;
-    width: auto; }
-
-.su-skipnav {
-  background: transparent;
-  color: #2e2d29;
-  left: 0;
-  position: absolute;
-  top: -4.2rem;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  z-index: 100;
-  padding: 1rem 1.5rem; }
-  .su-skipnav:focus {
-    background: #ffffff;
-    left: 0;
-    outline: 0;
-    position: absolute;
-    top: 0;
-    -webkit-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out; }
+    width: auto;
+    z-index: 9999; }
 /*# sourceMappingURL=decanter.css.map */
\ No newline at end of file
diff --git a/core/scss/components/index.scss b/core/scss/components/index.scss
index da7009cb5..88740c964 100644
--- a/core/scss/components/index.scss
+++ b/core/scss/components/index.scss
@@ -19,5 +19,4 @@
   'lockup/index',
   'quote/index',
   'site-search/index',
-  'skiplinks/index',
-  'skipnav/index';
+  'skiplinks/index';
diff --git a/core/scss/components/skipnav/_skipnav.scss b/core/scss/components/skipnav/_skipnav.scss
deleted file mode 100644
index c8113b215..000000000
--- a/core/scss/components/skipnav/_skipnav.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@charset "UTF-8";
-
-//
-// Skipnav
-//
-// 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. Learn more at https://webaim.org/techniques/skipnav.
-//
-// Markup: ../../templates/components/skipnav/skipnav.twig
-//
-// Style guide: Components.Skipnav
-//
-.su-skipnav {
-  @include skipnav;
-}
diff --git a/core/scss/components/skipnav/index.scss b/core/scss/components/skipnav/index.scss
deleted file mode 100644
index a4ec58466..000000000
--- a/core/scss/components/skipnav/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@charset "UTF-8";
-
-///
-/// ROLL UP
-///
-
-@import
-  'skipnav';
diff --git a/core/scss/utilities/mixins/accessibility/_skiplinks.scss b/core/scss/utilities/mixins/accessibility/_skiplinks.scss
index a3db3842a..50e0a066c 100644
--- a/core/scss/utilities/mixins/accessibility/_skiplinks.scss
+++ b/core/scss/utilities/mixins/accessibility/_skiplinks.scss
@@ -52,5 +52,6 @@
     position: fixed;
     top: .8em;
     width: auto;
+    z-index: 9999;
   }
 }
diff --git a/core/scss/utilities/mixins/accessibility/_skipnav.scss b/core/scss/utilities/mixins/accessibility/_skipnav.scss
deleted file mode 100644
index d07082a59..000000000
--- a/core/scss/utilities/mixins/accessibility/_skipnav.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-
-//
-// @skipnav
-//
-// Skip to navigation helper.
-//
-// Style guide: Mixins.Accessibility.skipnav
-//
-@mixin skipnav {
-  background: transparent;
-  color: $color-black;
-  left: 0;
-  position: absolute;
-  top: -4.2rem;
-  transition: all 0.2s ease-in-out;
-  z-index: 100;
-
-  @include padding(1rem 1.5rem);
-
-  &:focus {
-    background: $color-white;
-    left: 0;
-    outline: 0;
-    position: absolute;
-    top: 0;
-    transition: all 0.2s ease-in-out;
-  }
-}
diff --git a/core/scss/utilities/mixins/accessibility/index.scss b/core/scss/utilities/mixins/accessibility/index.scss
index c32e2daa7..e4af287aa 100644
--- a/core/scss/utilities/mixins/accessibility/index.scss
+++ b/core/scss/utilities/mixins/accessibility/index.scss
@@ -10,5 +10,4 @@
 
 @import
   'accessibly-hidden',
-  'skiplinks',
-  'skipnav';
+  'skiplinks';

From 4677e80d76bc827f3ed4d74be94969043c23d2ff Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Fri, 1 Mar 2019 10:47:37 -0800
Subject: [PATCH 04/13] skipnav template removal FIXUP

---
 core/templates/components/skipnav/skipnav.json | 3 ---
 core/templates/components/skipnav/skipnav.twig | 1 -
 2 files changed, 4 deletions(-)
 delete mode 100644 core/templates/components/skipnav/skipnav.json
 delete mode 100644 core/templates/components/skipnav/skipnav.twig

diff --git a/core/templates/components/skipnav/skipnav.json b/core/templates/components/skipnav/skipnav.json
deleted file mode 100644
index 0db3279e4..000000000
--- a/core/templates/components/skipnav/skipnav.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-
-}
diff --git a/core/templates/components/skipnav/skipnav.twig b/core/templates/components/skipnav/skipnav.twig
deleted file mode 100644
index 79cdbd6e1..000000000
--- a/core/templates/components/skipnav/skipnav.twig
+++ /dev/null
@@ -1 +0,0 @@
-<a href="#main-menu" class="su-skipnav">{{ text|default('Skip to main navigation') }}</a>

From 72ff66618aa92528747bfa8408849940bdab5315 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Mon, 4 Mar 2019 11:59:35 -0800
Subject: [PATCH 05/13] update twig template to use variable for better reuse

---
 core/templates/components/skiplinks/skiplinks.twig | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index e4099c30d..da22d34f5 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -1,7 +1,9 @@
+{% set skipID = "skip-to-content-" ~ random() %}
+
 <header>
-  <a href="#main-content" class="su-skiplinks">{{ text|default('Skip to content') }}</a>
+  <a href="#{{ anchor|default(skipID) }}" class="su-skiplinks">{{ text|default('Skip to content') }}</a>
 </header>
 
 <main>
-  <h2 id="main-content" class="su-sr-only-text" tabindex="-1">Main Content</h2>
+  <h2 id="{{ skipID }}" class="su-sr-only-text" tabindex="-1">Main Content</h2>
 </main>

From f9f41543debaae03b911af84cb0e55db3798c76d Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Mon, 4 Mar 2019 12:01:51 -0800
Subject: [PATCH 06/13] FIXUP

---
 core/templates/components/skiplinks/skiplinks.json | 2 +-
 core/templates/components/skiplinks/skiplinks.twig | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/templates/components/skiplinks/skiplinks.json b/core/templates/components/skiplinks/skiplinks.json
index 0db3279e4..f54fcdcb5 100644
--- a/core/templates/components/skiplinks/skiplinks.json
+++ b/core/templates/components/skiplinks/skiplinks.json
@@ -1,3 +1,3 @@
 {
-
+  "skipped_to_title": "Main Content"
 }
diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index da22d34f5..696c12d16 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -5,5 +5,5 @@
 </header>
 
 <main>
-  <h2 id="{{ skipID }}" class="su-sr-only-text" tabindex="-1">Main Content</h2>
+  <h2 id="{{ skipID }}" class="su-sr-only-text" tabindex="-1">{{ skipped_to_title }}</h2>
 </main>

From ba1636987b8bb5abe9305e69e838f08a5f1dc5a1 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Mon, 4 Mar 2019 16:03:25 -0800
Subject: [PATCH 07/13] enhance template and json and update z-index

---
 core/css/decanter.css                                    | 2 +-
 core/scss/utilities/mixins/accessibility/_skiplinks.scss | 2 +-
 core/templates/components/skiplinks/skiplinks.json       | 4 +++-
 core/templates/components/skiplinks/skiplinks.twig       | 4 ++--
 kss/builder/decanter/kss-assets/css/kss.css              | 3 +++
 kss/builder/decanter/scss/_skiplinks.scss                | 7 +++++++
 kss/builder/decanter/scss/kss.scss                       | 1 +
 7 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 kss/builder/decanter/scss/_skiplinks.scss

diff --git a/core/css/decanter.css b/core/css/decanter.css
index 39024e0b0..dee970909 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -7775,5 +7775,5 @@ a {
     position: fixed;
     top: .8em;
     width: auto;
-    z-index: 9999; }
+    z-index: 11222; }
 /*# sourceMappingURL=decanter.css.map */
\ No newline at end of file
diff --git a/core/scss/utilities/mixins/accessibility/_skiplinks.scss b/core/scss/utilities/mixins/accessibility/_skiplinks.scss
index 50e0a066c..d08152fdb 100644
--- a/core/scss/utilities/mixins/accessibility/_skiplinks.scss
+++ b/core/scss/utilities/mixins/accessibility/_skiplinks.scss
@@ -52,6 +52,6 @@
     position: fixed;
     top: .8em;
     width: auto;
-    z-index: 9999;
+    z-index: 11222;
   }
 }
diff --git a/core/templates/components/skiplinks/skiplinks.json b/core/templates/components/skiplinks/skiplinks.json
index f54fcdcb5..00d31d738 100644
--- a/core/templates/components/skiplinks/skiplinks.json
+++ b/core/templates/components/skiplinks/skiplinks.json
@@ -1,3 +1,5 @@
 {
-  "skipped_to_title": "Main Content"
+  "target_id": "main-content",
+  "target_text": "Main Content",
+  "link_text": "Skip to main content"
 }
diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index 696c12d16..cc2e2234b 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -1,9 +1,9 @@
 {% set skipID = "skip-to-content-" ~ random() %}
 
 <header>
-  <a href="#{{ anchor|default(skipID) }}" class="su-skiplinks">{{ text|default('Skip to content') }}</a>
+  <a href="#{{ target_id|default(skipID) }}" class="su-skiplinks">{{ link_text|default('Skip to main content') }}</a>
 </header>
 
 <main>
-  <h2 id="{{ skipID }}" class="su-sr-only-text" tabindex="-1">{{ skipped_to_title }}</h2>
+  <h2 id="{{ target_id|default(skipID) }}" class="su-sr-only-text" tabindex="-1">{{ target_text|default('Main Content') }}</h2>
 </main>
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 938a5f819..4b121a3e6 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -1845,6 +1845,9 @@ ol.linenums {
   font-weight: normal;
   color: #56554d; }
 
+#kssref-components-skiplinks .kss-modifier__example {
+  z-index: 11222; }
+
 .kss-toolbar {
   margin: 6px 0 24px;
   display: inline-block;
diff --git a/kss/builder/decanter/scss/_skiplinks.scss b/kss/builder/decanter/scss/_skiplinks.scss
new file mode 100644
index 000000000..f385d35ae
--- /dev/null
+++ b/kss/builder/decanter/scss/_skiplinks.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+#kssref-components-skiplinks {
+  .kss-modifier__example {
+    z-index: 11222;
+  }
+}
diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss
index e06b6e863..5224e47ba 100644
--- a/kss/builder/decanter/scss/kss.scss
+++ b/kss/builder/decanter/scss/kss.scss
@@ -53,4 +53,5 @@
   'prettify',
   'print',
   'sidebar',
+  'skiplinks',
   'toolbar';

From 851fc21838e6d72841a3f2b678a3308825ce39e1 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Tue, 5 Mar 2019 08:59:13 -0800
Subject: [PATCH 08/13] template file tweak

---
 core/templates/components/skiplinks/skiplinks.twig | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index cc2e2234b..ea31eda60 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -1,8 +1,6 @@
 {% set skipID = "skip-to-content-" ~ random() %}
 
-<header>
-  <a href="#{{ target_id|default(skipID) }}" class="su-skiplinks">{{ link_text|default('Skip to main content') }}</a>
-</header>
+<a{{ attributes }} href="#{{ target_id|default(skipID) }}" class="su-skiplinks {{ modifier_class }}">{{ link_text|default('Skip to main content') }}</a>
 
 <main>
   <h2 id="{{ target_id|default(skipID) }}" class="su-sr-only-text" tabindex="-1">{{ target_text|default('Main Content') }}</h2>

From b213cf5c071e1aa12963e5982af31844f5be572b Mon Sep 17 00:00:00 2001
From: Sherakama <sherakama@gmail.com>
Date: Tue, 5 Mar 2019 10:49:21 -0800
Subject: [PATCH 09/13] 120-skiplinks-b: Alternative render. (#306)

* 120-skiplinks-b: Alternative render.
---
 .../scss/components/skiplinks/_skiplinks.scss |  8 +++++++-
 .../components/skiplinks/skiplinks.twig       | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/core/scss/components/skiplinks/_skiplinks.scss b/core/scss/components/skiplinks/_skiplinks.scss
index 115a431ba..201219e23 100644
--- a/core/scss/components/skiplinks/_skiplinks.scss
+++ b/core/scss/components/skiplinks/_skiplinks.scss
@@ -10,7 +10,13 @@
 // to the main content as sighted, mouse users.
 // of the main content. Learn more at https://webaim.org/techniques/skipnav.
 //
-// Markup: ../../templates/components/skiplinks/skiplinks.twig
+// Markup: <header>
+//   <a href="#main-content" class="su-skiplinks">Skip to content</a>
+// </header>
+//  <main>
+//   <h2 id="main-content" class="su-sr-only-text" tabindex="-1">Main Content</h2>
+// </main>
+//
 //
 // Style guide: Components.Skiplinks
 //
diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index ea31eda60..65d502452 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -1,7 +1,16 @@
+{#
+/**
+ * Skip Links Component
+ *
+ * Accessibility feature to allow passing over the nav and going directly to
+ * the content.
+ *
+ * Available variables:
+ * - attributes: For additional HTML attributes not already provided.
+ * - modifier_class: Additional CSS classes to change look and behaviour.
+ * - target_id: The anchor to skip to in the page
+ * - link_text: The text for the link when in focus.
+ */
+#}
 {% set skipID = "skip-to-content-" ~ random() %}
-
 <a{{ attributes }} href="#{{ target_id|default(skipID) }}" class="su-skiplinks {{ modifier_class }}">{{ link_text|default('Skip to main content') }}</a>
-
-<main>
-  <h2 id="{{ target_id|default(skipID) }}" class="su-sr-only-text" tabindex="-1">{{ target_text|default('Main Content') }}</h2>
-</main>

From cb6d067c17436810b4dc818c540d19a4139ce154 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Tue, 5 Mar 2019 10:52:56 -0800
Subject: [PATCH 10/13] FIXUP

---
 core/templates/components/skiplinks/skiplinks.twig | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index 65d502452..f433f2649 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -8,7 +8,8 @@
  * Available variables:
  * - attributes: For additional HTML attributes not already provided.
  * - modifier_class: Additional CSS classes to change look and behaviour.
- * - target_id: The anchor to skip to in the page
+ * - target_id: The anchor to skip to in the page.
+ * - target_text: The text for the element that is being targeted.
  * - link_text: The text for the link when in focus.
  */
 #}

From 200c5ea6f3841de9c2d6eb46707894ca5e9f7327 Mon Sep 17 00:00:00 2001
From: Joe Knox <jgknox@stanford.edu>
Date: Tue, 5 Mar 2019 11:05:18 -0800
Subject: [PATCH 11/13] added documentation for the component to the style
 guide

---
 core/scss/components/skiplinks/_skiplinks.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/core/scss/components/skiplinks/_skiplinks.scss b/core/scss/components/skiplinks/_skiplinks.scss
index 201219e23..bb64cf111 100644
--- a/core/scss/components/skiplinks/_skiplinks.scss
+++ b/core/scss/components/skiplinks/_skiplinks.scss
@@ -10,8 +10,13 @@
 // to the main content as sighted, mouse users.
 // of the main content. Learn more at https://webaim.org/techniques/skipnav.
 //
+// To test this component's funtionality, 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 content</a>
+//   <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>

From f8ff36008cc81e40de8ce56f853d96b81d7bf110 Mon Sep 17 00:00:00 2001
From: Yvonne Tang <ytang2@stanford.edu>
Date: Tue, 5 Mar 2019 11:28:54 -0800
Subject: [PATCH 12/13] Update core/scss/components/skiplinks/_skiplinks.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>
---
 core/scss/components/skiplinks/_skiplinks.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/scss/components/skiplinks/_skiplinks.scss b/core/scss/components/skiplinks/_skiplinks.scss
index bb64cf111..ee260d9b3 100644
--- a/core/scss/components/skiplinks/_skiplinks.scss
+++ b/core/scss/components/skiplinks/_skiplinks.scss
@@ -10,7 +10,7 @@
 // to the main content as sighted, mouse users.
 // of the main content. Learn more at https://webaim.org/techniques/skipnav.
 //
-// To test this component's funtionality, place your cursor on "Example" and click.
+// 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.

From 67221ebdae23a1126de6c55b7e51433ae9a74c05 Mon Sep 17 00:00:00 2001
From: JB Christy <jb.christy@stanford.edu>
Date: Tue, 5 Mar 2019 16:59:43 -0800
Subject: [PATCH 13/13] 120 skiplinks b (#307)

* 120-skiplinks-b: Alternative render.
---
 .../scss/components/skiplinks/_skiplinks.scss |  3 +-
 core/templates/components/skiplinks/link.twig | 17 ++++++++
 .../components/skiplinks/skiplinks.twig       | 43 +++++++++++++++----
 .../components/skiplinks/target.twig          | 16 +++++++
 4 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 core/templates/components/skiplinks/link.twig
 create mode 100644 core/templates/components/skiplinks/target.twig

diff --git a/core/scss/components/skiplinks/_skiplinks.scss b/core/scss/components/skiplinks/_skiplinks.scss
index ee260d9b3..7da694350 100644
--- a/core/scss/components/skiplinks/_skiplinks.scss
+++ b/core/scss/components/skiplinks/_skiplinks.scss
@@ -8,7 +8,7 @@
 //
 // 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.
+// 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
@@ -23,6 +23,7 @@
 // </main>
 //
 //
+//
 // Style guide: Components.Skiplinks
 //
 .su-skiplinks {
diff --git a/core/templates/components/skiplinks/link.twig b/core/templates/components/skiplinks/link.twig
new file mode 100644
index 000000000..c46329dce
--- /dev/null
+++ b/core/templates/components/skiplinks/link.twig
@@ -0,0 +1,17 @@
+{#
+/**
+ * Skip Links Component
+ * Link element
+ *
+ * The link element of the Skip Links component should be included at the very top of your pages' markup,
+ * before the nav and other header elements. It should be the first focusable element on the page.
+ *
+ * Available variables:
+ * - attributes: Additional HTML attributes for the link.
+ * - modifier_class: Additional CSS class(es) to change look or behavior of the link.
+ * - link_text: The text for the link when in focus - defaults to 'Skip to main content'
+ * - target_id: The id of the element in the page to skip to, which must match the id
+ *   of the <h2> in _target.twig - defaults to 'su-main-content-1891'
+ */
+#}
+<a{{ attributes }} href="#{{ target_id|default('su-main-content-1891') }}" class="su-skiplinks {{ modifier_class }}">{{ link_text|default('Skip to main content') }}</a>
diff --git a/core/templates/components/skiplinks/skiplinks.twig b/core/templates/components/skiplinks/skiplinks.twig
index f433f2649..699cdae63 100644
--- a/core/templates/components/skiplinks/skiplinks.twig
+++ b/core/templates/components/skiplinks/skiplinks.twig
@@ -2,16 +2,41 @@
 /**
  * Skip Links Component
  *
- * Accessibility feature to allow passing over the nav and going directly to
- * the content.
+ * Accessibility feature to allow passing over the nav and going directly to the content.
+ *
+ * Note that this component has 2 pieces:
+ * - the link
+ * - the target the link jumps to
+ * These are provided in separate twig files for your convenience. To implement the Skip Links
+ * component in your project, you should not include this .twig file; instead, you should
+ * include the _link.twig and _target.twig files separately at the appropriate respecetive
+ * places in your markup.
  *
  * Available variables:
- * - attributes: For additional HTML attributes not already provided.
- * - modifier_class: Additional CSS classes to change look and behaviour.
- * - target_id: The anchor to skip to in the page.
- * - target_text: The text for the element that is being targeted.
- * - link_text: The text for the link when in focus.
+ * - attributes: Additional HTML attributes for the link.
+ * - modifier_class: Additional CSS class(es) to change look or behavior of the link.
+ * - link_text: The text for the link when in focus - defaults to 'Skip to main content'
+ * - target_id: The id of the element in the page to skip to - defaults to 'su-main-content-1891'
+ * - target_text: The text to be read by the screenreader when the user clicks the skiplink - defaults to 'Main Content'
  */
 #}
-{% set skipID = "skip-to-content-" ~ random() %}
-<a{{ attributes }} href="#{{ target_id|default(skipID) }}" class="su-skiplinks {{ modifier_class }}">{{ link_text|default('Skip to main content') }}</a>
+<header>
+  {% include "@decanter/components/skiplinks/link.twig" with
+    {
+      "target_id": target_id,
+      "link_text": link_text,
+      "attributes": attributes,
+      "modifier_class": modifier_class
+    }
+    only
+  %}
+</header>
+<main>
+  {% include "@decanter/components/skiplinks/target.twig" with
+    {
+      "target_id": target_id,
+      "target_text": target_text
+    }
+    only
+  %}
+</main>
diff --git a/core/templates/components/skiplinks/target.twig b/core/templates/components/skiplinks/target.twig
new file mode 100644
index 000000000..be3d89781
--- /dev/null
+++ b/core/templates/components/skiplinks/target.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * Skip Links Component
+ * Target element
+ *
+ * The target element of the Skip Links component should be included at the very top of your pages' main content,
+ * after the nav and other header elements.
+ *
+ * Available variables:
+ * - target_id: The id of the element in the page to skip to, which must match the href
+ *   of the <a> in _link.twig - defaults to 'su-main-content-1891'
+ * - target_text: The text to be read by the screenreader when the user clicks the
+ *   skiplink - defaults to 'Main Content'
+ */
+#}
+<h2 {{ attributes }} id="{{ target_id|default('su-main-content-1891') }}" class="su-sr-only-text {{ modifier_class }}" tabindex="-1">{{ target_text|default('Main Content') }}</h2>