feat(front): adds focusTrap action and implementation on PageNav (#711)

Closes: #711

front/src/lib/_utils/actions.js

@@ -0,0 +1,32 @@
+/**
+ * Traps the focus within the given node when enabled.
+ *
+ * @param {Node} node - The node within which to trap the focus.
+ * @param {boolean} enabled - Whether the focus trap is enabled.
+ * @returns {boolean} - Returns false if the focus trap is not enabled.
+ */
+export const focusTrap = (node, enabled) => {
+  if (!enabled) return false;
+  var focusableEls = node.querySelectorAll(
+    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
+  );
+  var firstFocusableEl = focusableEls[0];
+  var lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+  node.addEventListener('keydown', function (e) {
+    var isTab = e.key === 'Tab' || e.keyCode === 9;
+    var isEsc = e.key === 'Escape' || e.keyCode === 27;
+    if (isTab) {
+      var activeElement = document.activeElement;
+      var focusElement = e.shiftKey ? firstFocusableEl : lastFocusableEl;
+      if (activeElement === focusElement) {
+        e.preventDefault();
+        (e.shiftKey ? lastFocusableEl : firstFocusableEl).focus();
+      }
+    } else if (isEsc) {
+      const miniNavToggle = document.getElementById('page-navigation-checkbox');
+      miniNavToggle.checked = false;
+      miniNavToggle.focus();
+    }
+  });
+};

front/src/lib/components/PageNav.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { onMount } from 'svelte';
   import TableOfContents from '@components/content/TableOfContents.svelte';
   import ClosePageNav from '@components/icons/ClosePageNav.svelte';
   import { categoryClick, relatedClick } from '@utils/uiHelpers.js';
+  import { focusTrap } from '@utils/actions.js';
   import ListIcon from '~icons/gg/list';
 
   export let contents = false;
@@ -44,7 +44,7 @@
       <ClosePageNav classList="page-navigation-close" />
     </label>
   {/if}
-  <div class="page-navigation-list">
+  <div class="page-navigation-list" use:focusTrap={mini}>
     {#if contents && contents.length}
       <h2>Table of Contents</h2>
       <TableOfContents