Add Focus State for Tabbable Elements (#1963)

* Add focus state styling for tabbable fields via Plugin
bcgov · Jul 5, 2024 · 5757de4 · 5757de4
1 parent 9f583e9
commit 5757de4
Show file tree

Hide file tree

Showing 20 changed files with 196 additions and 52 deletions.
diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.31",
+  "version": "3.2.32",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

diff --git a/ppr-ui/src/assets/styles/accessibility.scss b/ppr-ui/src/assets/styles/accessibility.scss
@@ -0,0 +1,65 @@
+// Mixin for focus-visible styles with default values
+@mixin focus-visible-style($outline-offset: 2px, $border-radius: null) {
+  outline: 2px solid $focus-outline;
+  box-shadow: 0 0 0 2px #fff;
+  outline-offset: $outline-offset;
+  transition: none;
+
+  // Only apply border-radius if a value is provided
+  @if $border-radius != null {
+    border-radius: $border-radius;
+  }
+}
+
+// General styles for elements after focus
+.v-btn:after,
+.v-list-item:after,
+.v-selection-control--focus-visible .v-selection-control__input:before {
+  content: none;
+}
+
+// Prevent color changes in buttons when focus visible
+.v-btn:focus-visible .v-btn__overlay {
+  opacity: 0;
+}
+
+a {
+  padding: 0 4px;
+
+  &:focus-visible {
+    @include focus-visible-style(2px, 4px)
+  }
+}
+
+// Focus visible styles for radio buttons, buttons, and tabs
+.v-btn:focus-visible,
+.tab-focused .v-field {
+  @include focus-visible-style(2px);
+  z-index: 1;
+}
+
+.v-radio.v-selection-control--focus-visible {
+  @include focus-visible-style(2px, 4px);
+}
+
+// Checkbox button focus visible styling
+.v-checkbox-btn.v-selection-control--focus-visible .v-selection-control__wrapper {
+  @include focus-visible-style(-8px, 10px);
+}
+
+// Dropdown items focus visible styling
+.v-list-item:focus-visible {
+  @include focus-visible-style(-2px, 4px);
+}
+
+// Help icons focus visible styling
+.v-icon:focus-visible {
+  outline: 2px solid $focus-outline;
+  box-shadow: 0px 0px 0px 2px #fff;
+  border-radius: 50%;
+}
+
+.v-slide-group__container {
+  contain: unset;
+  overflow: unset;
+}
diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
@@ -1,4 +1,5 @@
 @import 'theme.scss';
+@import 'accessibility.scss';
 
 @font-face {
   font-family: 'BCSans';

diff --git a/ppr-ui/src/assets/styles/theme.scss b/ppr-ui/src/assets/styles/theme.scss
@@ -80,3 +80,6 @@ $app-orange: #f8661a; // same as the Vuetify theme caution
 // Sizes for Fonts
 $px-14: 0.8750rem;
 $px-16: 1.0000rem;
+
+// Accessibility
+$focus-outline: #003366;
diff --git a/ppr-ui/src/components/common/AccountInfo.vue b/ppr-ui/src/components/common/AccountInfo.vue
@@ -14,6 +14,7 @@
             class="mt-n1"
             color="primary"
             v-bind="props"
+            tabindex="0"
           >
             mdi-information-outline
           </v-icon>

diff --git a/ppr-ui/src/components/common/Breadcrumb.vue b/ppr-ui/src/components/common/Breadcrumb.vue
@@ -34,7 +34,7 @@
             <v-breadcrumbs-item
               v-for="(item, index) in breadcrumbs"
               :key="item.text"
-              class="fs-13"
+              class="fs-13 px-0"
               data-test-id="breadcrumb-item"
               :disabled="item.disabled"
               :href="item.href"

diff --git a/ppr-ui/src/components/common/RegistrationsWrapper.vue b/ppr-ui/src/components/common/RegistrationsWrapper.vue
@@ -80,6 +80,7 @@
                 color="primary"
                 v-bind="props"
                 class="mt-n1"
+                tabindex="0"
               >
                 mdi-information-outline
               </v-icon>

diff --git a/ppr-ui/src/components/dashboard/DashboardTabs.vue b/ppr-ui/src/components/dashboard/DashboardTabs.vue
@@ -5,16 +5,16 @@
     <!-- Tabs -->
     <v-tabs
       v-model="tabNumber"
-      height="64"
-      hideSlider
-      alignTabs="center"
+      hide-slider
       grow
+      class="ppr-mhr-tabs"
       @update:model-value="onTabChange"
     >
       <v-tab
         :value="0"
-        class="tab upper-border"
+        class="tab"
         :ripple="false"
+        tabindex="0"
         :class="{ 'mt-1': isMhrTab }"
       >
         <v-icon
@@ -27,8 +27,9 @@
       </v-tab>
       <v-tab
         :value="1"
-        class="tab upper-border"
+        class="tab"
         :ripple="false"
+        tabindex="0"
         :class="{ 'mt-1': isPprTab }"
       >
         <v-icon
@@ -150,6 +151,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
+
+.ppr-mhr-tabs {
+  height: 68px;
+  display: block;
+  overflow: visible;
+}
+
 .tab {
   min-height: 64px !important;
   background-color: $BCgovBlue5;
@@ -161,20 +169,24 @@ export default defineComponent({
   &:hover:not(.v-tab--selected) {
     background-color: $primary-blue
   }
+
+  &:nth-child(1) {
+    margin-right: 3px; // margin to make space for outline a11y
+  }
+  &:nth-child(2) {
+    margin-left: 3px; // margin to make space for outline a11y
+  }
 }
 .v-tab--selected {
   background-color: white;
   color: $gray9;
   pointer-events: none;
 }
-.upper-border {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  min-height: 58px;
-  max-height: 58px;
-  margin: 0 2.5px;
-}
 .v-window {
   min-height: 400px
 }
+
+.v-slide-group-item--active {
+  height: unset !important;
+}
 </style>
diff --git a/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue b/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue
@@ -19,6 +19,7 @@
               color="primary"
               v-bind="props"
               class="mr-1"
+              tabindex="0"
             >
               mdi-information-outline
             </v-icon>

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
@@ -172,6 +172,7 @@
                 color="primary"
                 v-bind="props"
                 data-test-id="no-certification-tooltip"
+                tabindex="0"
               >
                 mdi-information-outline
               </v-icon>

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
@@ -48,9 +48,10 @@
       >
         <template #activator="{ props }">
           <v-icon
-            class="circa-tooltip-icon pl-3 mt-4"
+            class="circa-tooltip-icon ml-1 mt-4"
             color="primary"
             v-bind="props"
+            tabindex="0"
           >
             mdi-information-outline
           </v-icon>

diff --git a/ppr-ui/src/components/parties/Parties.vue b/ppr-ui/src/components/parties/Parties.vue
@@ -80,9 +80,10 @@
           >
             <template #activator="{ props }">
               <v-icon
-                class="pl-1 mt-n1"
+                class="ml-1 mt-n1"
                 color="primary"
                 v-bind="props"
+                tabindex="0"
               >
                 mdi-information-outline
               </v-icon>

diff --git a/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue b/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
@@ -33,38 +33,25 @@
             :id="`reg-type-drop-${item.raw.group}`"
             class="registration-list-item"
             noGutters
+            @click="toggleGroup(item.raw.group)"
           >
             <v-row
               :id="`reg-type-drop-${item.raw.group}`"
-              style="pointer-events: all;"
-              @click="toggleGroup(item.raw.group)"
             >
-              <v-col cols="12">
+              <v-col>
                 <span class="registration-list-header">{{ item.raw.text }}</span>
               </v-col>
-            </v-row>
-            <template #append>
-              <v-btn
-                variant="plain"
-                size="small"
-                @click="toggleGroup(item.raw.group)"
+              <v-col
+                cols="auto"
               >
                 <v-icon
-                  v-if="displayGroup[item.raw.group]"
-                  class="expand-icon"
                   color="primary"
+                  class="mr-3"
                 >
-                  mdi-chevron-up
+                  {{ displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
                 </v-icon>
-                <v-icon
-                  v-else
-                  class="expand-icon"
-                  color="primary"
-                >
-                  mdi-chevron-down
-                </v-icon>
-              </v-btn>
-            </template>
+              </v-col>
+            </v-row>
           </v-list-item>
         </template>
         <template v-else-if="item.raw.class === 'registration-list-divider'">

diff --git a/ppr-ui/src/components/search/SearchBar.vue b/ppr-ui/src/components/search/SearchBar.vue
@@ -246,7 +246,7 @@
       <v-col class="pl-3 mt-1 search-btn-col">
         <v-btn
           id="search-btn"
-          class="search-bar-btn bg-primary mr-3"
+          class="search-bar-btn mr-3"
           :loading="searching"
           @click="searchCheck()"
         >

diff --git a/ppr-ui/src/components/search/SearchBarList.vue b/ppr-ui/src/components/search/SearchBarList.vue
@@ -24,11 +24,11 @@
         <v-list-item
           class="py-2"
           :class="{ 'top-border' : item.raw.icon === 'mdi-home' }"
+          @click="toggleGroup(item.raw.group)"
         >
           <v-row
             :id="`search-type-drop-${item.raw.group}`"
             class="py-3 search-list-header-row"
-            @click="toggleGroup(item.raw.group)"
           >
             <v-col
               class="py-0 pl-3"
@@ -47,13 +47,9 @@
               class="py-0"
               alignSelf="center"
             >
-              <v-btn
-                variant="plain"
-                size="18"
-                color="primary"
-                class="mt-n2"
-                :appendIcon="displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-              />
+              <v-icon color="primary">
+                {{ displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+              </v-icon>
             </v-col>
           </v-row>
         </v-list-item>

diff --git a/ppr-ui/src/components/tables/SearchHistory.vue b/ppr-ui/src/components/tables/SearchHistory.vue
@@ -157,8 +157,9 @@
                         v-else
                         color="primary"
                         size="20"
-                        class="px-8"
+                        class="ml-5"
                         v-bind="props"
+                        tabindex="0"
                       >
                         mdi-information-outline
                       </v-icon>

diff --git a/ppr-ui/src/main.ts b/ppr-ui/src/main.ts
@@ -8,6 +8,7 @@ import { getVueRouter } from '@/router'
 import { getPiniaStore } from '@/store'
 import * as Sentry from '@sentry/vue'
 import vuetify from './plugins/vuetify'
+import tabFocus from './plugins/tabFocus'
 import { vMaska } from 'maska'
 
 // Base App
@@ -69,6 +70,7 @@ async function start () {
   app.use(router)
   app.use(pinia)
   app.use(vuetify)
+  app.use(tabFocus)
   app.mount('#app')
 }