feat(front): enhances mini PageNav TOC keyboard navigation focus (#712)

dgrebb · Oct 11, 2023 · fbdca34 · fbdca34
1 parent 4562e1e
commit fbdca34
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/front/src/lib/_utils/actions.js b/front/src/lib/_utils/actions.js
@@ -27,6 +27,8 @@ export const focusTrap = (node, enabled) => {
       const miniNavToggle = document.getElementById('page-navigation-checkbox');
       miniNavToggle.checked = false;
       miniNavToggle.focus();
+    } else {
+      return;
     }
   });
 };
diff --git a/front/src/lib/components/content/TableOfContents.svelte b/front/src/lib/components/content/TableOfContents.svelte
@@ -5,10 +5,24 @@
   export let pageFenceClickHandler = null;
   export let activeLink = null;
   export let setActiveLink = null;
+
+  const TOCAnchorFocus = (e) => {
+    if (e.key === 'Enter' || e.keyCode === 13) {
+      const anchor = e.target.getAttribute('href');
+      const focusTarget = document.querySelector(
+        `.post-article a[href="${anchor}"]`
+      );
+      e.preventDefault();
+      pageFenceClickHandler(e);
+      focusTarget.focus();
+    } else {
+      return;
+    }
+  };
 </script>
 
 <ul class="toc">
-  {#each Object.values(contents) as { text, link }, i}
+  {#each contents as { text, link }, i}
     <li>
       <a
         on:click={(e) => {
@@ -20,6 +34,9 @@
         data-sveltekit-replacestate
         data-sveltekit-noscroll="false"
         use:activeLink
+        on:keydown={(e) => {
+          TOCAnchorFocus(e);
+        }}
       >
         <SvelteMarkdown source={text} isInline />
       </a>

diff --git a/front/src/lib/styles/base/utilities.css b/front/src/lib/styles/base/utilities.css
@@ -8,4 +8,7 @@
     transition-duration: var(--transition-duration);
     transition-timing-function: var(--transition-timing-function);
   }
+  .hidden {
+    display: none;
+  }
 }