updated logic for link generation

forstisabella · forstisabella · commit 2d926c8437c4 · 2022-12-29T19:19:52.000-05:00
diff --git a/js/index.js b/js/index.js
@@ -23,7 +23,6 @@ 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()
@@ -48,5 +47,4 @@ searchBar()
 glightbox()
 mapTable()
 expando()
-codeCopy()
-skipNav()
+codeCopy()
diff --git a/js/skip-nav/skip-nav.js b/js/skip-nav/skip-nav.js
@@ -1,12 +1,12 @@
-const button = 
-document.createElement ('skiplink');
+const button = document.createElement ('skiplink');
 button.textContent = 'Skip to main content';
 
-button.addEventListener ('focus-visible', => {
-  button.style.display = 'inline-block';
-});
+  button.addEventListener ('focus', (keypress) => {
+    button.style.display = 'inline-block';
+  });
 
-button.addEventListener ('focus-invisible', => {
+  button.addEventListener ('blur', (keypress) => {
   button.style.display = 'none';
-});
+  });
 
+document.body.appendChild(button)
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -80,7 +80,7 @@
   <link rel="stylesheet" href="{{ '/assets/algolia.css' | relative_url }}">
 </head>
 <body>
-  <a href="#breadcrumbs__link" class="skiplink">Skip to main content</a>
+  <a href="#{{ page.title | downcase | split:" " | join:"-" }}" 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">
