From 9b9310d572298f8918aea1626a47e6c746e6abad Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Wed, 3 Jul 2024 13:43:37 -0700
Subject: [PATCH 1/5] Add focus state styling for tabbable fields via Plugin

---
 ppr-ui/src/assets/styles/accessibility.scss   | 20 ++++++
 ppr-ui/src/assets/styles/base.scss            |  1 +
 ppr-ui/src/assets/styles/theme.scss           |  3 +
 ppr-ui/src/components/common/AccountInfo.vue  |  1 +
 .../common/RegistrationsWrapper.vue           |  1 +
 .../components/dashboard/DashboardTabs.vue    | 30 ++++-----
 .../mhrRegistration/MhrStatusCorrection.vue   |  1 +
 .../YourHome/HomeCertification.vue            |  1 +
 .../YourHome/ManufacturedYearInput.vue        |  3 +-
 .../src/components/tables/SearchHistory.vue   |  3 +-
 ppr-ui/src/main.ts                            |  2 +
 ppr-ui/src/plugins/tabFocus.ts                | 64 +++++++++++++++++++
 12 files changed, 113 insertions(+), 17 deletions(-)
 create mode 100644 ppr-ui/src/assets/styles/accessibility.scss
 create mode 100644 ppr-ui/src/plugins/tabFocus.ts

diff --git a/ppr-ui/src/assets/styles/accessibility.scss b/ppr-ui/src/assets/styles/accessibility.scss
new file mode 100644
index 000000000..d74ef3ca0
--- /dev/null
+++ b/ppr-ui/src/assets/styles/accessibility.scss
@@ -0,0 +1,20 @@
+.v-btn:after {
+  content: none;
+}
+
+a:focus-visible,
+.v-radio.v-selection-control--focus-visible,
+.v-btn:focus-visible,
+.tab-focused .v-field {
+  outline: 2px solid $focus-outline;
+  outline-offset: 2px;
+}
+
+.v-checkbox-btn.v-selection-control--focus-visible .v-selection-control__wrapper {
+  outline: 2px solid $focus-outline;
+  border-radius: 50%;
+}
+
+.v-icon:focus-visible {
+  outline-color: $focus-outline;
+}
\ No newline at end of file
diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
index a9c80ce6f..6a5e76be5 100644
--- 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
index c494a600e..abf6f1e53 100644
--- 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
index 801de6169..9322f33bf 100644
--- 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/RegistrationsWrapper.vue b/ppr-ui/src/components/common/RegistrationsWrapper.vue
index af65f4f2a..d1c20df9c 100644
--- 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
index 4bc43000f..c7f208ee6 100644
--- a/ppr-ui/src/components/dashboard/DashboardTabs.vue
+++ b/ppr-ui/src/components/dashboard/DashboardTabs.vue
@@ -5,17 +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"
-        :class="{ 'mt-1': isMhrTab }"
+        tabindex="0"
       >
         <v-icon
           class="mr-2"
@@ -27,9 +26,9 @@
       </v-tab>
       <v-tab
         :value="1"
-        class="tab upper-border"
+        class="tab"
         :ripple="false"
-        :class="{ 'mt-1': isPprTab }"
+        tabindex="0"
       >
         <v-icon
           class="mr-2"
@@ -43,7 +42,7 @@
     <!-- Window Items -->
     <v-window
       v-model="tabNumber"
-      class="rounded-bottom bg-white px-6"
+      class="rounded-bottom bg-white px-6 mx-1"
     >
       <v-window-item
         :value="0"
@@ -150,6 +149,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;
@@ -158,6 +164,7 @@ export default defineComponent({
   letter-spacing: 0;
   text-transform: none !important;
   border-radius: 4px 4px 0 0!important;
+  margin: 5px 4px; // margin to make space for outline a11y
   &:hover:not(.v-tab--selected) {
     background-color: $primary-blue
   }
@@ -167,13 +174,6 @@ export default defineComponent({
   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
 }
diff --git a/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue b/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue
index 05691ec19..64e4660f5 100644
--- 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
index 476647125..c7d2c0234 100644
--- 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
index ceda2c535..a4b0292bb 100644
--- 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/tables/SearchHistory.vue b/ppr-ui/src/components/tables/SearchHistory.vue
index a6aadb3ae..b696dabd3 100644
--- 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
index 39a0b1167..08a15754d 100644
--- 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')
 }
 
diff --git a/ppr-ui/src/plugins/tabFocus.ts b/ppr-ui/src/plugins/tabFocus.ts
new file mode 100644
index 000000000..77e3dc117
--- /dev/null
+++ b/ppr-ui/src/plugins/tabFocus.ts
@@ -0,0 +1,64 @@
+/**
+ * Plugin to modify the VTextField component to add a 'tab-focused' css class when the input
+ * is focused via the Tab key. This allows to style the v-text-field's input differently
+ * when it's focused with the keyboard, compared to when it's clicked with the mouse.
+ *
+ * The event listeners are cleaned up when the component is unmounted.
+ */
+export default {
+  install(app) {
+    const TAB_KEY = 'Tab'
+
+    // Access the VTextField component if it's globally registered
+    const VTextField = app.component('VTextField')
+
+    if (!VTextField) return
+
+    // Store the original mount function
+    const originalMount = VTextField.mounted
+
+    // Modify the mounted lifecycle hook
+    VTextField.mounted = function () {
+      // Call any existing mounted functions
+      if (originalMount) originalMount.call(this)
+
+      const input = this.$el.querySelector('input')
+      if (!input) return
+
+      const handleKeyDown = event => {
+        if (event.key === TAB_KEY) {
+          input.lastKeyPressed = TAB_KEY
+        }
+      }
+
+      const handleFocus = () => {
+        if (input.lastKeyPressed === TAB_KEY) {
+          this.$el.classList.add('tab-focused')
+        }
+        input.lastKeyPressed = '' // Reset after check
+      }
+
+      const handleBlur = () => {
+        this.$el.classList.remove('tab-focused')
+      }
+
+      window.addEventListener('keydown', handleKeyDown)
+      input.addEventListener('focus', handleFocus)
+      input.addEventListener('blur', handleBlur)
+
+      input.cleanupEventListeners = () => {
+        window.removeEventListener('keydown', handleKeyDown)
+        input.removeEventListener('focus', handleFocus)
+        input.removeEventListener('blur', handleBlur)
+      }
+    }
+
+    // Modify the unmounted lifecycle hook to remove all event listeners
+    VTextField.unmounted = function () {
+      const input = this.$el.querySelector('input')
+      if (input && input.cleanupEventListeners) {
+        input.cleanupEventListeners()
+      }
+    }
+  }
+}

From 0956dbcc246b3a6aa60e613bb51cde887b69fceb Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Wed, 3 Jul 2024 14:10:02 -0700
Subject: [PATCH 2/5] Version update

---
 ppr-ui/package-lock.json | 4 ++--
 ppr-ui/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index 83b8e1f57..bc48d0dae 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.31",
+  "version": "3.2.32",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.31",
+      "version": "3.2.32",
       "dependencies": {
         "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index 4570e7885..a4270ac90 100644
--- 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",

From 2c049d6030a8dfae0cb5ef2b4bbd33e59220dee0 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Thu, 4 Jul 2024 06:59:11 -0700
Subject: [PATCH 3/5] Update styling and tabFocus plugin

---
 ppr-ui/src/assets/styles/accessibility.scss   | 38 ++++++++-
 ppr-ui/src/components/common/Breadcrumb.vue   |  2 +-
 ppr-ui/src/components/parties/Parties.vue     |  3 +-
 .../RegistrationBarTypeAheadList.vue          | 29 ++-----
 ppr-ui/src/components/search/SearchBar.vue    |  2 +-
 .../src/components/search/SearchBarList.vue   | 12 +--
 ppr-ui/src/plugins/tabFocus.ts                | 85 ++++++++++---------
 7 files changed, 96 insertions(+), 75 deletions(-)

diff --git a/ppr-ui/src/assets/styles/accessibility.scss b/ppr-ui/src/assets/styles/accessibility.scss
index d74ef3ca0..f71d18185 100644
--- a/ppr-ui/src/assets/styles/accessibility.scss
+++ b/ppr-ui/src/assets/styles/accessibility.scss
@@ -1,20 +1,50 @@
-.v-btn:after {
+.v-btn:after,
+.v-list-item:after 
+{
   content: none;
 }
 
-a:focus-visible,
+.v-btn:focus-visible {
+  .v-btn__overlay {
+    opacity: 0;
+  }
+}
+
+a {
+  padding: 0 4px;
+
+  &:focus-visible {
+    outline: 2px solid $focus-outline;
+    border-radius: 4px;
+    box-shadow: 0px 0px 0px 2px #fff;
+    transition: none;
+  }
+}
+
 .v-radio.v-selection-control--focus-visible,
 .v-btn:focus-visible,
 .tab-focused .v-field {
   outline: 2px solid $focus-outline;
   outline-offset: 2px;
+  box-shadow: 0px 0px 0px 2px #fff;
+  transition: none;
 }
 
 .v-checkbox-btn.v-selection-control--focus-visible .v-selection-control__wrapper {
   outline: 2px solid $focus-outline;
   border-radius: 50%;
+  transition: none;
 }
 
-.v-icon:focus-visible {
-  outline-color: $focus-outline;
+.v-list-item:focus-visible {
+  outline: 2px solid $focus-outline;
+  outline-offset: -2px;
+  border-radius: 4px;
+  transition: none;
+}
+
+textarea:focus-visible,
+.v-textarea .v-field:focus-visible {
+  outline: 2px solid $focus-outline !important;
+  outline-offset: 2px;
 }
\ No newline at end of file
diff --git a/ppr-ui/src/components/common/Breadcrumb.vue b/ppr-ui/src/components/common/Breadcrumb.vue
index 64ffbc552..e2bcbac4b 100644
--- 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/parties/Parties.vue b/ppr-ui/src/components/parties/Parties.vue
index 8733fb408..222e32a76 100644
--- 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
index 6377f36fe..209991e77 100644
--- 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
index 5e29966c7..ad0ff14e6 100644
--- 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
index 26ae405a3..27b9e4599 100644
--- 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/plugins/tabFocus.ts b/ppr-ui/src/plugins/tabFocus.ts
index 77e3dc117..9862405bb 100644
--- a/ppr-ui/src/plugins/tabFocus.ts
+++ b/ppr-ui/src/plugins/tabFocus.ts
@@ -1,6 +1,6 @@
 /**
- * Plugin to modify the VTextField component to add a 'tab-focused' css class when the input
- * is focused via the Tab key. This allows to style the v-text-field's input differently
+ * Plugin to modify the VTextField and VTextarea components to add a 'tab-focused' css class when the input
+ * is focused via the Tab key. This allows to style the input differently
  * when it's focused with the keyboard, compared to when it's clicked with the mouse.
  *
  * The event listeners are cleaned up when the component is unmounted.
@@ -9,56 +9,63 @@ export default {
   install(app) {
     const TAB_KEY = 'Tab'
 
-    // Access the VTextField component if it's globally registered
-    const VTextField = app.component('VTextField')
-
-    if (!VTextField) return
+    const addTabFocusToComponent = (component: any) => {
+      if (!component) return
 
-    // Store the original mount function
-    const originalMount = VTextField.mounted
+      // Store the original mount function
+      const originalMount = component.mounted
 
-    // Modify the mounted lifecycle hook
-    VTextField.mounted = function () {
-      // Call any existing mounted functions
-      if (originalMount) originalMount.call(this)
+      // Modify the mounted lifecycle hook
+      component.mounted = function () {
+        // Call any existing mounted functions
+        if (originalMount) originalMount.call(this)
 
-      const input = this.$el.querySelector('input')
-      if (!input) return
+        const input = this.$el.querySelector('input, textarea')
+        if (!input) return
 
-      const handleKeyDown = event => {
-        if (event.key === TAB_KEY) {
-          input.lastKeyPressed = TAB_KEY
+        const handleKeyDown = event => {
+          if (event.key === TAB_KEY) {
+            input.lastKeyPressed = TAB_KEY
+          }
         }
-      }
 
-      const handleFocus = () => {
-        if (input.lastKeyPressed === TAB_KEY) {
-          this.$el.classList.add('tab-focused')
+        const handleFocus = () => {
+          if (input.lastKeyPressed === TAB_KEY) {
+            this.$el.classList.add('tab-focused')
+          }
+          input.lastKeyPressed = '' // Reset after check
         }
-        input.lastKeyPressed = '' // Reset after check
-      }
 
-      const handleBlur = () => {
-        this.$el.classList.remove('tab-focused')
-      }
+        const handleBlur = () => {
+          this.$el.classList.remove('tab-focused')
+        }
 
-      window.addEventListener('keydown', handleKeyDown)
-      input.addEventListener('focus', handleFocus)
-      input.addEventListener('blur', handleBlur)
+        window.addEventListener('keydown', handleKeyDown)
+        input.addEventListener('focus', handleFocus)
+        input.addEventListener('blur', handleBlur)
 
-      input.cleanupEventListeners = () => {
-        window.removeEventListener('keydown', handleKeyDown)
-        input.removeEventListener('focus', handleFocus)
-        input.removeEventListener('blur', handleBlur)
+        input.cleanupEventListeners = () => {
+          window.removeEventListener('keydown', handleKeyDown)
+          input.removeEventListener('focus', handleFocus)
+          input.removeEventListener('blur', handleBlur)
+        }
       }
-    }
 
-    // Modify the unmounted lifecycle hook to remove all event listeners
-    VTextField.unmounted = function () {
-      const input = this.$el.querySelector('input')
-      if (input && input.cleanupEventListeners) {
-        input.cleanupEventListeners()
+      // Modify the unmounted lifecycle hook to remove all event listeners
+      component.unmounted = function () {
+        const input = this.$el.querySelector('input, textarea')
+        if (input && input.cleanupEventListeners) {
+          input.cleanupEventListeners()
+        }
       }
     }
+
+    // Access the VTextField component and add tab focus events
+    const VTextField = app.component('VTextField')
+    addTabFocusToComponent(VTextField)
+
+    // Access the VTextarea component and add tab focus events
+    const VTextarea = app.component('VTextarea')
+    addTabFocusToComponent(VTextarea)
   }
 }

From 51b022f21d19f09823b933129d1e17b24e10c91d Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Thu, 4 Jul 2024 10:51:35 -0700
Subject: [PATCH 4/5] UXA feedback, a11y scss refactor

---
 ppr-ui/src/assets/styles/accessibility.scss   | 60 +++++++++++--------
 .../components/dashboard/DashboardTabs.vue    | 16 ++++-
 2 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/ppr-ui/src/assets/styles/accessibility.scss b/ppr-ui/src/assets/styles/accessibility.scss
index f71d18185..8fad9d040 100644
--- a/ppr-ui/src/assets/styles/accessibility.scss
+++ b/ppr-ui/src/assets/styles/accessibility.scss
@@ -1,50 +1,62 @@
+// 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-list-item:after,
+.v-selection-control--focus-visible .v-selection-control__input:before {
   content: none;
 }
 
-.v-btn:focus-visible {
-  .v-btn__overlay {
-    opacity: 0;
-  }
+// Prevent color changes in buttons when focus visible
+.v-btn:focus-visible .v-btn__overlay {
+  opacity: 0;
 }
 
 a {
   padding: 0 4px;
 
   &:focus-visible {
-    outline: 2px solid $focus-outline;
-    border-radius: 4px;
-    box-shadow: 0px 0px 0px 2px #fff;
-    transition: none;
+    @include focus-visible-style(2px, 4px)
   }
 }
 
+// Focus visible styles for radio buttons, buttons, and tabs
 .v-radio.v-selection-control--focus-visible,
 .v-btn:focus-visible,
 .tab-focused .v-field {
-  outline: 2px solid $focus-outline;
-  outline-offset: 2px;
-  box-shadow: 0px 0px 0px 2px #fff;
-  transition: none;
+  @include focus-visible-style(2px);
+  z-index: 1;
 }
 
+// Checkbox button focus visible styling
 .v-checkbox-btn.v-selection-control--focus-visible .v-selection-control__wrapper {
-  outline: 2px solid $focus-outline;
-  border-radius: 50%;
-  transition: none;
+  @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;
-  outline-offset: -2px;
-  border-radius: 4px;
-  transition: none;
+  box-shadow: 0px 0px 0px 2px #fff;
+  border-radius: 50%;
 }
 
-textarea:focus-visible,
-.v-textarea .v-field:focus-visible {
-  outline: 2px solid $focus-outline !important;
-  outline-offset: 2px;
+.v-slide-group__container {
+  contain: unset;
+  overflow: unset;
 }
\ No newline at end of file
diff --git a/ppr-ui/src/components/dashboard/DashboardTabs.vue b/ppr-ui/src/components/dashboard/DashboardTabs.vue
index c7f208ee6..2526933db 100644
--- a/ppr-ui/src/components/dashboard/DashboardTabs.vue
+++ b/ppr-ui/src/components/dashboard/DashboardTabs.vue
@@ -15,6 +15,7 @@
         class="tab"
         :ripple="false"
         tabindex="0"
+        :class="{ 'mt-1': isMhrTab }"
       >
         <v-icon
           class="mr-2"
@@ -29,6 +30,7 @@
         class="tab"
         :ripple="false"
         tabindex="0"
+        :class="{ 'mt-1': isPprTab }"
       >
         <v-icon
           class="mr-2"
@@ -42,7 +44,7 @@
     <!-- Window Items -->
     <v-window
       v-model="tabNumber"
-      class="rounded-bottom bg-white px-6 mx-1"
+      class="rounded-bottom bg-white px-6"
     >
       <v-window-item
         :value="0"
@@ -164,10 +166,16 @@ export default defineComponent({
   letter-spacing: 0;
   text-transform: none !important;
   border-radius: 4px 4px 0 0!important;
-  margin: 5px 4px; // margin to make space for outline a11y
   &: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;
@@ -177,4 +185,8 @@ export default defineComponent({
 .v-window {
   min-height: 400px
 }
+
+.v-slide-group-item--active {
+  height: unset !important;
+}
 </style>

From e977844cf9b64ca64b1dcac396c3ff87e7e79d11 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Thu, 4 Jul 2024 13:25:47 -0700
Subject: [PATCH 5/5] Update focus state for Home Owner roles radios

---
 ppr-ui/src/assets/styles/accessibility.scss | 5 ++++-
 ppr-ui/src/resources/ownerRoles.ts          | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/ppr-ui/src/assets/styles/accessibility.scss b/ppr-ui/src/assets/styles/accessibility.scss
index 8fad9d040..93659a7e7 100644
--- a/ppr-ui/src/assets/styles/accessibility.scss
+++ b/ppr-ui/src/assets/styles/accessibility.scss
@@ -32,13 +32,16 @@ a {
 }
 
 // Focus visible styles for radio buttons, buttons, and tabs
-.v-radio.v-selection-control--focus-visible,
 .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);
diff --git a/ppr-ui/src/resources/ownerRoles.ts b/ppr-ui/src/resources/ownerRoles.ts
index 6bb916811..ad8082556 100644
--- a/ppr-ui/src/resources/ownerRoles.ts
+++ b/ppr-ui/src/resources/ownerRoles.ts
@@ -12,7 +12,7 @@ export const HomeOwnerRoles: Array<OwnerRoleConfigIF> = [
   },
   {
     id: 'executor-option',
-    class: 'executor-radio px-4',
+    class: 'executor-radio ml-4 mr-2 pr-2',
     model: HomeOwnerPartyTypes.EXECUTOR,
     label: 'Executor',
     tooltipContent: 'An Executor is the personal representative named in the will or appointed by court to carry out ' +
@@ -20,7 +20,7 @@ export const HomeOwnerRoles: Array<OwnerRoleConfigIF> = [
   },
   {
     id: 'administrator-option',
-    class: 'administrator-radio px-4',
+    class: 'administrator-radio ml-4 mr-2 pr-2',
     model: HomeOwnerPartyTypes.ADMINISTRATOR,
     label: 'Administrator',
     tooltipContent: '\n' +
@@ -29,7 +29,7 @@ export const HomeOwnerRoles: Array<OwnerRoleConfigIF> = [
   },
   {
     id: 'trustee-option',
-    class: 'trustee-radio pl-2',
+    class: 'trustee-radio ml-2 pr-2',
     model: HomeOwnerPartyTypes.TRUSTEE,
     label: 'Bankruptcy Trustee',
     tooltipContent: 'A Bankruptcy Trustee is a professional who is licensed by the Government of Canada to administer' +