data-preservation-programs · tikagan · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024
diff --git a/packages/fe/assets/scss/typography.scss b/packages/fe/assets/scss/typography.scss
@@ -190,12 +190,15 @@ button {
 
 @mixin linkUnderline {
   color: $greenYellow;
-  &:hover {
+  &:hover{
     &:after {
       transition: 150ms ease-in;
       width: 100%;
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset(2px);
+  }
   &:after {
     content: '';
     position: absolute;

diff --git a/packages/fe/assets/scss/variables.scss b/packages/fe/assets/scss/variables.scss
@@ -68,16 +68,25 @@ $breakpoint_UltraLarge: 140.625rem; // 2250px
   box-shadow: 0.125rem 0px 0.3125rem 0.25rem rgb(black, 0.4);
 }
 
+@mixin focusOutline {
+  outline: 3px solid rgba($greenYellow, 0.5);
+}
+
+@mixin focusOutlineWithOffset($offset: 4px) {
+  outline: 3px solid rgba($greenYellow, 0.5);
+  outline-offset: $offset;
+}
+
 @mixin focusBoxShadow {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba($greenYellow, 0.5);
 }
 
 @mixin focusBoxShadowSmall {
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 3px rgba($greenYellow, 0.5);
 }
 
 @mixin focusBoxShadowLink {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba($greenYellow, 0.5);
   border-radius: 0.125rem;
 }
 

diff --git a/packages/fe/components/accordion/accordion-header.vue b/packages/fe/components/accordion/accordion-header.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="accordion-header"
-    @click="toggle">
+    @click="toggle"
+    @keydown.enter="toggle">
 
     <slot />
 

diff --git a/packages/fe/components/apply-form-card.vue b/packages/fe/components/apply-form-card.vue
@@ -237,6 +237,10 @@ export default {
     border: 0;
     border-bottom: 2px solid white;
     border-radius: 0;
+    &:focus-visible {
+      @include focusOutlineWithOffset;
+      border-radius: toRem(5);
+    }
   }
 }
 
@@ -251,5 +255,19 @@ export default {
   .selection-window {
     padding: 0;
   }
+  &:focus-within {
+    .field-select {
+      border-color: $mandysPink;
+    }
+  }
+  select.select {
+  &.native {
+    &:focus-visible {
+      @include focusOutlineWithOffset;
+      border-radius: toRem(5);
+      box-shadow: none;
+    }
+  }
+}
 }
 </style>
diff --git a/packages/fe/components/buttons/button-b.vue b/packages/fe/components/buttons/button-b.vue
@@ -130,7 +130,8 @@ export default {
   color: $greenYellow;
   border-color: $greenYellow;
   &:not([disabled]) {
-    &:hover {
+    &:hover,
+    &:focus-visible {
       background-color: $greenYellow;
     }
   }

diff --git a/packages/fe/components/buttons/button-x.vue b/packages/fe/components/buttons/button-x.vue
@@ -81,7 +81,7 @@ export default {
       }
     }
     &:focus-visible {
-      @include focusBoxShadow;
+      @include focusOutline;
     }
   }
   &[disabled] {
@@ -92,7 +92,7 @@ export default {
 }
 
 a.button,
-button.button, {
+button.button {
   cursor: pointer;
   &[disabled] {
     cursor: no-drop;

diff --git a/packages/fe/components/card.vue b/packages/fe/components/card.vue
@@ -1,6 +1,10 @@
 <template>
   <div :class="['card', `corner-position__${cornerPosition}`, { outline }, variant]">
 
+    <div class="content">
+      <slot />
+    </div>
+
     <div class="panel">
       <svg
         class="corner"
@@ -27,10 +31,6 @@
       </div>
     </ButtonX>
 
-    <div class="content">
-      <slot />
-    </div>
-
   </div>
 </template>
 
@@ -178,7 +178,8 @@ $cardRadiusTiny: 0.9375rem;
 .button {
   position: absolute;
   z-index: 20;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     .icon-text {
       transition: 150ms ease-in;
       transform: scale(1.05);
@@ -188,6 +189,10 @@ $cardRadiusTiny: 0.9375rem;
       transform: rotate(45deg);
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: toRem(5);
+  }
   :deep(.button-content) {
     display: flex;
     flex-direction: row;

diff --git a/packages/fe/components/dropdown-panel.vue b/packages/fe/components/dropdown-panel.vue
@@ -87,7 +87,8 @@ $squigglyWidth: 40;
 // ///////////////////////////////////////////////////////////////////// General
 .dropdown-panel {
   &.toggle-on-hover {
-    &:hover {
+    &:hover,
+    &:focus-within {
       .panel-container {
         transition: 150ms ease-in;
         transform: translate(-50%, 0);

diff --git a/packages/fe/components/faq-accordion.vue b/packages/fe/components/faq-accordion.vue
@@ -29,7 +29,7 @@
           :key="index"
           :active="active">
 
-          <AccordionHeader>
+          <AccordionHeader :tabindex="0">
             <div class="question">
               <span class="text" v-html="entry.question" />
               <IconChevron />
@@ -132,7 +132,7 @@ $padding: 2.25rem;
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
+  width: calc(100% - 1rem);
   height: 2px;
   background-color: $titanWhite;
 }
@@ -145,6 +145,7 @@ $padding: 2.25rem;
 }
 
 .expand-all-button {
+  margin-right: 1rem;
   margin-bottom: 1.5rem;
   :deep(.button-content) {
     display: flex;
@@ -158,19 +159,29 @@ $padding: 2.25rem;
       display: block;
     }
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transform: scale(1.05);
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset(4px);
+    border-radius: toRem(5);
+  }
   :deep(.text) {
     font-size: toRem(18);
   }
 }
 
+.faq-top-border {
+  width: calc(100% - 1rem);
+}
+
 .accordion-wrapper {
   position: relative;
 }
 
 .accordion-section {
+  padding-right: 1rem;
   &:first-child {
     &:before {
       bottom: auto;
@@ -182,12 +193,16 @@ $padding: 2.25rem;
       transition: 150ms ease-out;
       transform: rotate(-180deg);
     }
-    &:hover {
+    &:hover,
+    .accordion-header:focus-visible {
       .icon-chevron {
         transition: 150ms ease-out;
         transform: rotate(-180deg) scale(1.15);
       }
     }
+    .accordion-content {
+      visibility: visible;
+    }
   }
   &:last-child {
     .accordion-content {
@@ -201,15 +216,22 @@ $padding: 2.25rem;
 .accordion-header {
   padding: $padding 0;
   cursor: pointer;
-  &:hover {
-      .text {
-        transition: 150ms ease-out;
-        transform: scale(1.05) translateX(2%);
-      }
-      .icon-chevron {
-        transition: 150ms ease-out;
-        transform: scale(1.15);
-      }
+  &:hover,
+  &:focus-visible {
+    .text {
+      transition: 150ms ease-out;
+      transform: scale(1.05) translateX(2%);
+    }
+    .icon-chevron {
+      transition: 150ms ease-out;
+      transform: scale(1.15);
+    }
+  }
+  &:focus {
+    .icon-chevron {
+      @include focusOutlineWithOffset(6px);
+      border-radius: toRem(3);
+    }
   }
 }
 
@@ -240,6 +262,7 @@ $padding: 2.25rem;
 }
 
 .accordion-content {
+  visibility: hidden;
   &:before {
     @include border;
   }

diff --git a/packages/fe/components/form/fields/range.vue b/packages/fe/components/form/fields/range.vue
@@ -166,18 +166,32 @@ $borderWidth: 2px;
     background-color: $titanWhite;
     transition: all 150ms ease;
   }
-  &:hover {
+  &:hover,
+  &:focus-within {
     .thumb {
-      &:before,
       &:after {
         height: 0.75rem;
       }
     }
   }
+  #total_datacap_size_range {
+    &:focus-visible {
+      + .thumb-container {
+        .thumb {
+          &:before {
+            height: calc(100% + 1rem);
+            @include focusBoxShadow;
+          }
+          &::after {
+            height: 1rem;
+          }
+        }
+      }
+    }
+  }
   &:active {
     .thumb {
       background-color: $mandysPink;
-      &::before,
       &::after {
         background-color: $mandysPink;
         height: 1rem;
@@ -198,25 +212,27 @@ $borderWidth: 2px;
   width: $thumbWidth;
   height: $trackHeight;
   background-color: $titanWhite;
+  z-index: 5;
   transition: all 150ms linear;
-  &:before,
+
   &:after {
     content: '';
     position: absolute;
     bottom: 100%;
     height: 0.5rem;
-    width: 50%;
+    left: 0;
+    width: 100%;
     pointer-events: inherit;
     background-color: inherit;
     transition: all 150ms linear;
   }
   &:before {
     content: '';
-    right: 50%;
-  }
-  &:after {
-    content: '';
-    left: 50%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: calc(100% + 0.5rem);
+    width: 100%;
   }
 }
 
@@ -258,14 +274,19 @@ $borderWidth: 2px;
   top: 0;
   margin-top: 0.375rem;
   transition: 150ms ease-out;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transition: 150ms ease-in;
     transform: scale(1.1);
     &:before {
       transition: 150ms ease-in;
       opacity: 1;
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: toRem(3);
+  }
   &:before {
     content: '';
     position: absolute;
@@ -289,14 +310,12 @@ $borderWidth: 2px;
     &:hover {
       transform: translateX(calc(-100% + toRem(9))) scale(1.1); // remove width of '+' icon
     }
-    &:before {
-      width: calc(100% + toRem(3 * 2) - toRem(9)); // remove width of '+' icon
-    }
     .button-content {
       &:after {
         content: '+';
-        position: relative;
+        position: absolute;
         top: toRem(-1);
+        right: toRem(-9);
         font-size: 90%;
         font-weight: 500;
         transform: scale(0.5);