fix(front): addresses a11y focus outlines and interactivity for `Page…

…Nav` closes #710
dgrebb · Oct 1, 2023 · 4831142 · 4831142
1 parent 48d849d
commit 4831142
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 61 deletions.
diff --git a/_ci/spell/dict.txt b/_ci/spell/dict.txt
@@ -43,4 +43,5 @@ Speaketh
 runneth
 navigateth
 provideth
-Ensureth
+Ensureth
+replacestate
diff --git a/front/src/lib/components/PageNav.svelte b/front/src/lib/components/PageNav.svelte
@@ -33,9 +33,12 @@
       type="checkbox"
       name="page-navigation-checkbox"
       id="page-navigation-checkbox"
-      tabindex="-1"
     />
-    <label for="page-navigation-checkbox" class="page-navigation-toggle">
+    <label
+      for="page-navigation-checkbox"
+      class="page-navigation-toggle"
+      aria-label="Show Page Navigation"
+    >
       <ListIcon class="page-navigation-open" />
       <ClosePageNav classList="page-navigation-close" />
     </label>

diff --git a/front/src/lib/components/icons/ClosePostNav.svelte b/front/src/lib/components/icons/ClosePostNav.svelte
diff --git a/front/src/lib/styles/base/layout.css b/front/src/lib/styles/base/layout.css
@@ -6,8 +6,8 @@
   justify-content: center;
   align-items: center;
   justify-items: center;
-  padding-right: 0;
-  padding-left: 0;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
   width: 100%;
   max-width: 64rem /* 1024px */;
   @media screen and (min-width: 333px) {
@@ -31,13 +31,12 @@
   position: relative;
   align-items: center;
   z-index: 1;
-  padding: 1rem;
-  padding-bottom: 0;
+  padding: 1rem 1.5rem 0 1.5rem;
   @media screen and (min-width: 480px) {
     padding-top: 1.25rem;
   }
   @media screen and (min-width: 640px) {
-    padding: 2.5rem 2.25rem 0 2.25rem;
+    padding: 2rem 2.25rem 0 2.25rem;
   }
 }
 body.ready .header {

diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
@@ -61,6 +61,7 @@
 }
 
 .category-posts-transition-container {
+  box-shadow: var(--shadow-elevation-low);
   background: var(--rim-light-bg), var(--bg-clr);
   @media screen and (min-width: 640px) {
     box-shadow: var(--shadow-elevation-high);
@@ -90,16 +91,16 @@
     --highlight-clr: var(--jasper);
 
     --rim-light-bg: linear-gradient(
-      5deg,
+      10deg,
       var(--bg-clr) 33%,
       var(--bg-clr) 77%,
-      var(--sunshine) 100%
+      var(--sun) 133%
     );
     --category-rim-light-bg: linear-gradient(
       35deg,
       var(--bg-clr) 33%,
       var(--bg-clr) 77%,
-      var(--rim-clr) 100%
+      var(--sun) 150%
     );
     --rim-light-mask-bg: linear-gradient(3deg, transparent, var(--rim-clr));
     --category-rim-light-mask-bg: linear-gradient(
@@ -217,8 +218,8 @@
     }
 
     .privacy,
-    .post,
-    .category-posts-transition-container {
+    .post {
+      box-shadow: var(--shadow-elevation-low);
       background: var(--rim-light-bg), var(--bg-clr);
       &::before {
         background: var(--rim-light-mask-bg);
@@ -238,8 +239,7 @@
     }
 
     .privacy,
-    .post-article,
-    .category-list {
+    .post-article {
       a:not(.heading-anchor-link) {
         border-bottom: 1px solid var(--link-clr);
         color: var(--link-clr);
@@ -454,11 +454,19 @@
 
     .page-navigation.mini {
       input#page-navigation-checkbox {
+        &:focus,
+        &:focus-visible {
+          ~ label {
+            background-color: var(--sun-50);
+            color: var(--violet);
+          }
+        }
         ~ label {
           background-color: var(--lemon-50-a75);
           color: var(--violet-a50);
           &:hover,
-          &:focus {
+          &:focus,
+          &:focus-visible {
             background-color: var(--sun-50);
             color: var(--violet);
           }
@@ -657,8 +665,7 @@
     }
 
     .privacy,
-    .post-article,
-    .category-list {
+    .post-article {
       a:not(.heading-anchor-link) {
         border-bottom: 1px solid var(--celestial-a75);
         color: var(--celestial-a75);
@@ -864,11 +871,18 @@
 
     .page-navigation.mini {
       input#page-navigation-checkbox {
-        background-color: var(--rich-black-a75);
+        &:focus,
+        &:focus-visible {
+          ~ label {
+            background-color: var(--grape);
+            color: var(--celestial);
+          }
+        }
         ~ label {
           background-color: var(--oxford-blue-a50);
           &:hover,
-          &:focus {
+          &:focus,
+          &:focus-visible {
             background-color: var(--grape);
             color: var(--celestial);
           }

diff --git a/front/src/lib/styles/components/nav.css b/front/src/lib/styles/components/nav.css
@@ -10,17 +10,21 @@
     top 0.3s ease,
     opacity 0.3s ease,
     color 0.3s ease;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-  background-color: rgb(var(--background-end-rgb));
-  padding: 0.75rem 1.25rem;
+  box-shadow: var(--shadow-elevation-low);
+  background-color: var(--bg-clr);
+  padding: 0.5rem 1rem;
   &:focus,
   &:focus-visible {
     top: 2rem;
     opacity: 1;
   }
+  @media screen and (min-width: 640px) {
+    padding: 0.75rem 1.25rem;
+  }
 }
 
 .nav-home {
+  vertical-align: bottom;
   transition: unset;
   transition: font-size, color;
   transition-duration: var(--transition-duration);
@@ -61,7 +65,7 @@
 }
 
 .nav-link {
-  vertical-align: text-top;
+  vertical-align: bottom;
   transition: opacity, border;
   transition-duration: var(--transition-duration);
   transition-timing-function: var(--transition-timing-function);

diff --git a/front/src/lib/styles/components/page-nav.css b/front/src/lib/styles/components/page-nav.css
@@ -9,7 +9,6 @@
   }
   li {
     position: relative;
-    overflow: hidden;
     font-size: 0.875rem;
     list-style-type: none;
   }
@@ -69,8 +68,29 @@
       padding: 0.33rem 0.33rem 0.36rem 0.36rem;
     }
     input#page-navigation-checkbox {
-      display: none;
-      border-radius: 0.77rem;
+      position: absolute;
+      opacity: 0;
+      outline: none;
+      border-radius: 0.33rem;
+      width: 0;
+      height: 0;
+      &:focus,
+      &:focus-visible {
+        ~ label {
+          mix-blend-mode: difference;
+          outline-style: dotted;
+          outline-width: thin;
+          outline-offset: 1px;
+        }
+      }
+      &:checked {
+        &:focus,
+        &:focus-visible {
+          ~ label {
+            mix-blend-mode: normal;
+          }
+        }
+      }
       ~ label {
         .page-navigation-open {
           display: block;
@@ -82,9 +102,10 @@
           position: relative;
           top: -1.85rem;
           right: -333px;
+          visibility: hidden;
           opacity: 0;
           backdrop-filter: blur(0.5rem);
-          transition-property:
+          transition:
             right var(--transition-duration),
             opacity var(--transition-duration),
             max-height 0;
@@ -119,11 +140,8 @@
           }
           & + .page-navigation-list {
             right: 0;
+            visibility: visible;
             opacity: 1;
-            transition:
-              max-height 0 0,
-              opacity,
-              max-height;
             max-height: 100%;
             & label.bottom {
               box-shadow: none;

diff --git a/front/src/lib/styles/components/theme-toggle.css b/front/src/lib/styles/components/theme-toggle.css
@@ -1,8 +1,9 @@
 .theme-toggle {
-  transition-property: opacity;
-  padding: 0.75rem 0 0.75rem 0.75rem;
-  @apply dg--transition-effect;
   opacity: 0.7;
+  transition-duration: var(--transition-duration);
+  transition-property: opacity;
+  transition-timing-function: var(--transition-timing-function);
+  padding: 1rem 0 0.75rem 0.75rem;
   &:hover,
   &:focus,
   &:focus-visible,

diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css
@@ -22,6 +22,9 @@
       top: 2.5rem;
       right: 0;
       padding: 0 0.5rem;
+      label:not(.bottom) {
+        top: 3px;
+      }
     }
   }
   .category-posts-list,

diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
@@ -1,13 +1,16 @@
 .post {
   display: block;
   position: relative;
-  margin-top: 2.25rem;
+  margin-top: 1.75rem;
   border-radius: 0.77rem;
+  @media screen and (min-width: 333px) {
+    margin-top: 0.75rem;
+  }
   @media screen and (min-width: 640px) {
     margin-top: 1.5rem;
   }
   @media screen and (min-width: 768px) {
-    margin-top: 2.75rem;
+    margin-top: 3.5rem;
     padding: 2.33rem;
   }
   &::before {