Merge pull request #30 from data-preservation-programs/feat-keyboard-…

…navigation-a11y feat: keyboard navigation a11y
data-preservation-programs · Sep 14, 2023 · 30da77f · 30da77f
2 parents da2d753 + 03a2b8d
commit 30da77f
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 74 deletions.
diff --git a/assets/scss/theme/utilities.scss b/assets/scss/theme/utilities.scss
@@ -84,15 +84,21 @@ $siam: #565D50; // siam
 }
 
 @mixin focusBoxShadow {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 4px rgba(255, 197, 130, 0.7);
 }
 
 @mixin focusBoxShadowSmall {
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 3px rgba(255, 197, 130, 0.5);
+}
+
+@mixin focusOutline {
+  outline: 4px solid rgba(255, 197, 130, 0.7);
+  outline-offset: 4px;
+  border-radius: toRem(2);
 }
 
 @mixin focusBoxShadowLink {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba(255, 197, 130, 0.5);
   border-radius: 0.125rem;
 }
 

diff --git a/components/blocks/accordion-block.vue b/components/blocks/accordion-block.vue
@@ -5,7 +5,9 @@
         v-for="(section, index) in sections"
         :key="`accordion-section-${index}`"
         :class="['accordion-section', { open: active[index] } ]"
-        @click="toggleSection(index)">
+        :tabindex="0"
+        @click="toggleSection(index)"
+        @keyup.enter="toggleSection(index)">
 
         <div class="border"></div>
 
@@ -177,14 +179,18 @@ const getIconComponent = (icon) => {
     -webkit-mask-composite: xor;
             mask-composite: exclude;
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     &:after {
       opacity: 1;
     }
     :deep(.plus-minus-icon) {
       filter: drop-shadow(0px 0px 3px rgba(#FFC582, 0.6));
     }
   }
+  &:focus-visible {
+    @include focusOutline;
+  }
   &.open {
     .accordion-content {
       max-height: toRem(200);

diff --git a/components/button/cta.vue b/components/button/cta.vue
@@ -117,7 +117,7 @@ const detailHeight = computed(() => {
       }
     }
     &:focus-visible {
-      @include focusBoxShadow;
+      @include focusOutline;
     }
   }
   .disabled {
@@ -219,7 +219,8 @@ const detailHeight = computed(() => {
       @include transitionDefault;
     }
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     .detail {
       .fill-path {
         opacity: 1;
@@ -230,12 +231,16 @@ const detailHeight = computed(() => {
       color: $codGray;
     }
   }
+  &:focus-visible {
+    @include focusOutline;
+  }
 }
 
 .theme__secondary {
   display: block;
   width: fit-content;
   padding-right: toRem(25);
+  @include transitionDefault;
   .button-content {
     position: relative;
     @include b2;
@@ -246,12 +251,17 @@ const detailHeight = computed(() => {
       margin-left: 0.5rem;
       @include transitionDefault;
     }
-    &:hover {
-      &:after {
-        transform: translateX(0.5rem);
-      }
+  }
+  &:hover,
+  &:focus-visible {
+    .button-content::after {
+      transform: translateX(0.5rem);
     }
   }
+  &:focus-visible {
+    padding-right: toRem(30);
+    @include focusOutline;
+  }
 }
 
 .theme__icon {
@@ -271,14 +281,18 @@ const detailHeight = computed(() => {
       @include transitionDefault;
     }
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background-color: rgba($sageGreen, 1);
     :deep(.icon) {
       path {
         fill: $codGray;
       }
     }
   }
+  &:focus-visible {
+    @include focusBoxShadow;
+  }
 }
 
 .theme__big-number {

diff --git a/components/navbar.vue b/components/navbar.vue
@@ -92,8 +92,14 @@ const scrollToSection = async (el) => {
 }
 
 .nav-item {
+  position: relative;
   display: flex;
   justify-content: flex-end;
+  padding-top: 0.5rem;
+  @include transitionDefault;
+  &:focus-within {
+    @include focusOutline;
+  }
 }
 
 .nav-link {
@@ -122,7 +128,8 @@ const scrollToSection = async (el) => {
     opacity: 0;
     transition: inherit;
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transform: translateY(-1.125rem);
     &:before {
       height: toRem(30);

diff --git a/components/roadmap.vue b/components/roadmap.vue
@@ -107,19 +107,18 @@ const cta = computed(() => {
 .heading-wrapper {
   display: flex;
   align-items: center;
+  margin-top: toRem(25);
 }
 
-.heading {
-  display: flex;
-  align-items: center;
-  margin-top: toRem(25);
+.heading-button {
   cursor: pointer;
   @include transitionDefault;
   @include mini {
     margin-top: 0;
     margin-bottom: 0.5rem;
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transform: scale(1.15);
     .icon {
       :deep(path) {
@@ -130,9 +129,12 @@ const cta = computed(() => {
       color: $chardonnay;
     }
   }
-  .heading-button {
-    display: block;
-    padding: 0.5rem;
+  &:focus-visible {
+    @include focusOutline;
+  }
+  .heading {
+    display: flex;
+    align-items: center;
   }
   .icon {
     width: toRem(41);

diff --git a/components/signup-card.vue b/components/signup-card.vue
@@ -65,7 +65,11 @@
         <div class="field-wrapper">
           <ZeroDropdown class="country dropdown-field" :display-selected="true">
             <template #toggle-button="{ togglePanel, panelOpen, selected }">
-              <div :class="['toggle-button form-field', { error: fieldError.country }, { open: panelOpen } ]" @click="togglePanel">
+              <div
+                :class="['toggle-button form-field', { error: fieldError.country }, { open: panelOpen } ]"
+                :tabindex="0"
+                @click="togglePanel"
+                @keyup.enter="togglePanel">
                 <p v-if="selected" class="toggle-button-label selected">
                   {{ selected.label }}
                 </p>
@@ -367,13 +371,13 @@ const submitForm = async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  cursor: pointer;
   @include transitionDefault;
   &.open {
     border-color: var(--secondary-text-color);
     border-bottom-color: transparent;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    // padding-bottom: toRem(4);
   }
 }
 .toggle-button-label {

diff --git a/components/site-footer.vue b/components/site-footer.vue
@@ -1,18 +1,32 @@
 <template>
   <footer id="site-footer">
 
-    <div class="panel-top">
+    <div class="content">
       <div class="grid-bottom-noBottom-noGutter">
 
         <div class="col-2_sm-5">
           <button
             class="site-footer-logo"
-            @click="scrollToTop">
+            @click="scrollToTop"
+            @keyup.enter="scrollToTop">
             <SiteFooterLogo />
           </button>
         </div>
 
-        <div class="col-4_sm-5_mi-7" data-push-left="off-6_sm-2_mi-0">
+        <div class="col-4_sm-12 legal-wrapper" data-push-left="off-1_md-0">
+          <div v-if="legal" class="legal">
+            <ZeroButton
+              v-for="(link) in legal.links"
+              :key="link.text"
+              :to="link.to"
+              :tag="link.tag"
+              class="footer-button">
+              {{ link.text }}
+            </ZeroButton>
+          </div>
+        </div>
+
+        <div class="col-4_sm-5_mi-7" data-push-left="off-1_md-2_mi-0">
           <div v-if="authors" class="authors">
             <div
               class="text"
@@ -32,29 +46,6 @@
       </div>
     </div>
 
-    <div class="panel-bottom">
-      <div class="grid-bottom-noBottom-noGutter">
-
-        <div class="col-3_md-2_sm-hidden">
-          <!-- dummy div -->
-        </div>
-
-        <div class="col-4_md-5_sm-12">
-          <div v-if="legal" class="legal">
-            <ZeroButton
-              v-for="link in legal.links"
-              :key="link.text"
-              :to="link.to"
-              :tag="link.tag"
-              class="footer-button">
-              {{ link.text }}
-            </ZeroButton>
-          </div>
-        </div>
-
-      </div>
-    </div>
-
   </footer>
 </template>
 
@@ -121,22 +112,28 @@ const scrollToTop = async () => {
   }
 }
 
-.panel-top,
-.panel-bottom {
+.content {
   position: relative;
   width: 100%;
 }
 
 .site-footer-logo {
   display: block;
-  :deep(svg) {
-    @include transitionDefault;
-    &:hover {
+  padding: toRem(6) toRem(6) 0;
+  &:hover,
+  &:focus-visible {
+    :deep(svg) {
+      @include transitionDefault;
       transform: scale(1.08);
     }
   }
+  &:focus-visible {
+    @include focusOutline
+  }
   @include medium {
-    width: toRem(95);
+    :deep(svg) {
+      width: toRem(95);
+    }
   }
 }
 
@@ -159,8 +156,12 @@ const scrollToTop = async () => {
     :deep(a) {
       display: inline-block;
       @include transitionDefault;
-      &:hover {
-        transform: scale(1.1);
+      &:hover,
+      &:focus-visible {
+        transform: scale(1.1) translateX(-10px);
+      }
+      &:focus-visible {
+        @include focusOutline;
       }
     }
     :deep(span) {
@@ -173,9 +174,9 @@ const scrollToTop = async () => {
   .logos {
     display: flex;
     :deep(.button) {
+      display: flex;
       @include transitionDefault;
       @include small {
-        display: flex;
         align-items: flex-end;
       }
       &:first-child {
@@ -196,22 +197,28 @@ const scrollToTop = async () => {
           width: 32%;
         }
       }
-      &:hover {
+      &:hover,
+      &:focus-visible {
         transform: scale(1.08);
       }
+      &:focus-visible {
+        @include focusOutline;
+      }
     }
   }
 }
 
+.legal-wrapper {
+  @include small {
+    order: 1;
+  }
+}
 .legal {
-  transform: translateY(-100%);
   @include medium {
     display: flex;
     justify-content: space-between;
-    transform: translate(1rem, calc(-100% + 0.375rem));
   }
   @include small {
-    transform: none;
     margin-top: toRem(39);
   }
 }
@@ -240,5 +247,8 @@ const scrollToTop = async () => {
   &:hover {
     border-bottom: solid 1px rgba($sageGreen, 1);
   }
+  &:focus-visible {
+    @include focusOutline;
+  }
 }
 </style>