getting to a stopping point

forstisabella · forstisabella · commit 90d36454e42c · 2022-12-28T19:49:14.000-05:00
diff --git a/js/index.js b/js/index.js
@@ -23,6 +23,7 @@ import autocomplete from './algolia'
 import mapTable from './map-table'
 import expando from './expando'
 import codeCopy from './code-copy'
+import skipNav from './skip-nav'
 
 feedback()
 accordion()
@@ -47,4 +48,5 @@ searchBar()
 glightbox()
 mapTable()
 expando()
-codeCopy()
+codeCopy()
+skipNav()
diff --git a/js/skip-nav/skip-nav.js b/js/skip-nav/skip-nav.js
@@ -0,0 +1,12 @@
+const button = 
+document.createElement ('skiplink');
+button.textContent = 'Skip to main content';
+
+button.addEventListener ('focus-visible', => {
+  button.style.display = 'inline-block';
+});
+
+button.addEventListener ('focus-invisible', => {
+  button.style.display = 'none';
+});
+
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -80,6 +80,7 @@
   <link rel="stylesheet" href="{{ '/assets/algolia.css' | relative_url }}">
 </head>
 <body>
+  <a href="#breadcrumbs__link" class="skiplink">Skip to main content</a>
   <div id="consent-manager"></div>
   {{ content }}
   <a class="back-scrolling" data-back-scrolling data-active-class="back-scrolling--active">
diff --git a/src/_sass/components/skip-nav.scss b/src/_sass/components/skip-nav.scss
@@ -0,0 +1,19 @@
+.skiplink {
+  position: absolute;
+  left: -1000px;
+  top: auto;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  display: block;
+  z-index: 999;
+}
+.skiplink:focus-visible {
+  background: color(gray-700)
+  padding: 2px;
+  color: color(secondary);
+  position: static;
+  width: 200px;
+  height: auto;
+  overflow: visible;
+}
