fix(front): fixes focusTrap loop index and removes border on focus-vi…

…sible
dgrebb · Oct 11, 2023 · c36e94d · c36e94d
1 parent e9dd6d6
commit c36e94d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/front/src/lib/_utils/actions.js b/front/src/lib/_utils/actions.js
@@ -7,13 +7,13 @@
  */
 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 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];
     var isTab = e.key === 'Tab' || e.keyCode === 9;
     var isEsc = e.key === 'Escape' || e.keyCode === 27;
     if (isTab) {

diff --git a/front/src/lib/components/PageNav.svelte b/front/src/lib/components/PageNav.svelte
@@ -57,21 +57,23 @@
     {#if categories && categories.length}
       <h2>Categories</h2>
       <ul class="page-navigation-list">
-        <li class="page-navigation-category-all">
-          <a
-            on:click={(e) => {
-              categoryClick(pathname, name);
-              setActiveLink(e);
-              if (mini) pageFenceClickHandler();
-            }}
-            href="/posts/category/all/"
-            class="transition-link"
-            class:active={category === 'all'}
-            use:activeLink
-          >
-            All
-          </a>
-        </li>
+        {#if !contents}
+          <li class="page-navigation-category-all">
+            <a
+              on:click={(e) => {
+                categoryClick(pathname, name);
+                setActiveLink(e);
+                if (mini) pageFenceClickHandler();
+              }}
+              href="/posts/category/all/"
+              class="transition-link"
+              class:active={category === 'all'}
+              use:activeLink
+            >
+              All
+            </a>
+          </li>
+        {/if}
         {#each categories as { attributes: { name, slug } }, i}
           <li>
             <a

diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
@@ -33,6 +33,7 @@
   text-rendering: optimizeLegibility !important;
   :focus-visible {
     outline-offset: 0.25rem;
+    border-bottom: 0 !important;
   }
 }