From 508e923e719ef4ddcc18ca30bd6cd03a8a9b7503 Mon Sep 17 00:00:00 2001
From: qhanson55 <quinnhanson55@gmail.com>
Date: Tue, 31 Dec 2024 11:24:23 -0800
Subject: [PATCH] Ensured and added keyboard navigation for public facing
 components

---
 frontend/src/components/common/BackButton.vue | 13 ++-
 frontend/src/components/common/Breadcrumb.vue |  2 +-
 frontend/src/components/common/StatusPill.vue |  2 +
 .../src/components/file/DeleteDocument.vue    |  7 +-
 frontend/src/components/file/DocumentCard.vue |  2 +
 .../src/components/file/DocumentCardLite.vue  |  2 +
 .../housing/enquiry/EnquiryIntakeForm.vue     | 14 +++-
 .../submission/SubmissionAssistance.vue       |  8 ++
 .../submission/SubmissionIntakeForm.vue       | 83 ++++++++++++-------
 frontend/src/components/layout/Footer.vue     |  3 -
 frontend/src/locales/en-CA.json               | 17 ++++
 frontend/src/utils/utils.ts                   | 19 +++++
 frontend/src/views/housing/HousingView.vue    | 68 ++++++++++-----
 .../src/views/housing/project/ProjectView.vue | 13 +++
 .../src/views/permit/PermitStatusView.vue     |  3 +
 .../components/file/DeleteDocument.spec.ts    |  6 ++
 .../unit/components/file/DocumentCard.spec.ts |  6 ++
 .../unit/views/housing/HousingView.spec.ts    |  5 ++
 18 files changed, 206 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/common/BackButton.vue b/frontend/src/components/common/BackButton.vue
index b911fb7a..389a00eb 100644
--- a/frontend/src/components/common/BackButton.vue
+++ b/frontend/src/components/common/BackButton.vue
@@ -38,14 +38,13 @@ function onConfirmLeave() {
     v-if="!confirmLeave"
     class="p-0"
     text
+    @click="router.push({ name: routeName })"
   >
-    <router-link :to="{ name: routeName }">
-      <font-awesome-icon
-        icon="fa fa-arrow-circle-left"
-        class="mr-1 app-primary-color"
-      />
-      <span class="app-primary-color">{{ text }}</span>
-    </router-link>
+    <font-awesome-icon
+      icon="fa fa-arrow-circle-left"
+      class="mr-1 app-primary-color"
+    />
+    <span class="app-primary-color">{{ text }}</span>
   </Button>
   <Button
     v-if="confirmLeave"
diff --git a/frontend/src/components/common/Breadcrumb.vue b/frontend/src/components/common/Breadcrumb.vue
index 19daaad6..f5f30be7 100644
--- a/frontend/src/components/common/Breadcrumb.vue
+++ b/frontend/src/components/common/Breadcrumb.vue
@@ -52,6 +52,6 @@ a {
 
 .p-breadcrumb {
   border: none;
-  padding: 0rem;
+  padding: 0.125rem;
 }
 </style>
diff --git a/frontend/src/components/common/StatusPill.vue b/frontend/src/components/common/StatusPill.vue
index a4c25a30..f1a7ec0a 100644
--- a/frontend/src/components/common/StatusPill.vue
+++ b/frontend/src/components/common/StatusPill.vue
@@ -88,6 +88,7 @@ const getState = computed(() => {
   <div class="flex">
     <div
       v-tooltip="{ value: getState?.toolTip, modifier: toolTipDirection }"
+      v-tooltip.focus="{ value: getState?.toolTip, modifier: toolTipDirection }"
       class="flex justify-content-center align-items-center auth-indicator"
       :class="[getState?.badgeClass]"
       :style="{
@@ -96,6 +97,7 @@ const getState = computed(() => {
         '--height': dimensions.height,
         '--line-height': dimensions.lineHeight
       }"
+      tabindex="0"
     >
       <font-awesome-icon
         v-if="getState?.iconString"
diff --git a/frontend/src/components/file/DeleteDocument.vue b/frontend/src/components/file/DeleteDocument.vue
index 33614446..f634f7f0 100644
--- a/frontend/src/components/file/DeleteDocument.vue
+++ b/frontend/src/components/file/DeleteDocument.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
 import { Button, useConfirm, useToast } from '@/lib/primevue';
 import { documentService } from '@/services';
 import { useSubmissionStore } from '@/store';
@@ -15,6 +17,7 @@ const { document, disabled = false } = defineProps<{
 const submissionStore = useSubmissionStore();
 
 // Actions
+const { t } = useI18n();
 const confirm = useConfirm();
 const toast = useToast();
 
@@ -42,11 +45,13 @@ const confirmDelete = (document: Document) => {
 
 <template>
   <Button
-    v-tooltip.bottom="'Delete document'"
+    v-tooltip.bottom="t('deleteDocument.deleteTooltip')"
+    v-tooltip.focus.bottom="t('deleteDocument.deleteTooltip')"
     :disabled="disabled"
     class="p-button-lg p-button-text p-button-danger p-0 align-self-center"
     aria-label="Delete object"
     style="position: relative; top: 5; right: 0"
+    tabindex="0"
     @click="
       (e) => {
         confirmDelete(document);
diff --git a/frontend/src/components/file/DocumentCard.vue b/frontend/src/components/file/DocumentCard.vue
index 27ae3676..d2a42281 100644
--- a/frontend/src/components/file/DocumentCard.vue
+++ b/frontend/src/components/file/DocumentCard.vue
@@ -88,8 +88,10 @@ function onClick() {
       <div class="grid">
         <div
           v-tooltip.bottom="`${document.filename} Uploaded by ${document.createdByFullName}`"
+          v-tooltip.focus.bottom="`${document.filename} Uploaded by ${document.createdByFullName}`"
           class="col-12 mb-0 text-left font-semibold text-overflow-ellipsis white-space-nowrap"
           style="overflow: hidden"
+          tabindex="0"
         >
           <a href="#">{{ document.filename }}</a>
         </div>
diff --git a/frontend/src/components/file/DocumentCardLite.vue b/frontend/src/components/file/DocumentCardLite.vue
index 2ce2f0ef..ebeedf14 100644
--- a/frontend/src/components/file/DocumentCardLite.vue
+++ b/frontend/src/components/file/DocumentCardLite.vue
@@ -47,8 +47,10 @@ function onClick() {
       <div class="grid">
         <div
           v-tooltip.bottom="`${document.filename} Uploaded by ${document.createdByFullName}`"
+          v-tooltip.focus.bottom="`${document.filename} Uploaded by ${document.createdByFullName}`"
           class="col-12 mb-0 text-left font-semibold text-overflow-ellipsis white-space-nowrap mt-2"
           style="overflow: hidden"
+          tabindex="0"
         >
           <a href="#">{{ document.filename }}</a>
         </div>
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
index ba30d3a0..185f5af5 100644
--- a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
+++ b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { Form } from 'vee-validate';
 import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { object, string } from 'yup';
 
@@ -70,6 +71,7 @@ const formSchema = object({
 });
 
 // Actions
+const { t } = useI18n();
 const confirm = useConfirm();
 const router = useRouter();
 const toast = useToast();
@@ -367,9 +369,9 @@ onBeforeMount(async () => {
               Enter the project ID given to you when you registered your project with a Navigator
             </span>
             <div
-              v-tooltip.right="
-                `Project ID can be found in the confirmation email you received at the time of submission.`
-              "
+              v-tooltip.right="t('enquiryIntakeForm.projectIdTooltip')"
+              v-tooltip.focus.right="t('enquiryIntakeForm.projectIdTooltip')"
+              tabindex="0"
             >
               <font-awesome-icon icon="fa-solid fa-circle-question" />
             </div>
@@ -416,7 +418,11 @@ onBeforeMount(async () => {
         <template #title>
           <div class="flex">
             <span class="section-header">Would you like to register your project with a Navigator?</span>
-            <div v-tooltip.right="`Consider registering if you are working or getting started on a housing project.`">
+            <div
+              v-tooltip.right="t('enquiryIntakeForm.registerEnquiryTooltip')"
+              v-tooltip.focus.right="t('enquiryIntakeForm.registerEnquiryTooltip')"
+              tabindex="0"
+            >
               <font-awesome-icon icon="fa-solid fa-circle-question" />
             </div>
           </div>
diff --git a/frontend/src/components/housing/submission/SubmissionAssistance.vue b/frontend/src/components/housing/submission/SubmissionAssistance.vue
index c5ea882a..55b4dbfc 100644
--- a/frontend/src/components/housing/submission/SubmissionAssistance.vue
+++ b/frontend/src/components/housing/submission/SubmissionAssistance.vue
@@ -62,7 +62,10 @@ const confirmSubmit = () => {
     <div :class="{ 'teleport-container': true, '--open': showTab }">
       <div
         class="assistance-tab pb-3 pt-3 pr-1 pl-1"
+        tabindex="0"
         @click="showTab = !showTab"
+        @keydown.enter.prevent="showTab = !showTab"
+        @keydown.space.prevent="showTab = !showTab"
       >
         <div class="tab-text">Assistance</div>
         <font-awesome-icon
@@ -127,6 +130,11 @@ const confirmSubmit = () => {
   width: 20rem;
 }
 
+:deep(.assistance-tab:focus-visible) {
+  outline: 0.25rem solid $app-hover;
+  outline-offset: 0.125rem;
+}
+
 .assistance-tab {
   cursor: pointer;
   position: absolute;
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
index 970d584a..35f6c1a0 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { Form, FieldArray, ErrorMessage } from 'vee-validate';
 import { computed, onBeforeMount, nextTick, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import AdvancedFileUpload from '@/components/file/AdvancedFileUpload.vue';
@@ -58,7 +59,7 @@ import {
   SubmissionType
 } from '@/utils/enums/housing';
 import { confirmationTemplateSubmission } from '@/utils/templates';
-import { omit } from '@/utils/utils';
+import { getHTMLElement, omit } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 import type { AutoCompleteCompleteEvent } from 'primevue/autocomplete';
@@ -123,6 +124,7 @@ const validationErrors = computed(() => {
 });
 
 // Actions
+const { t } = useI18n();
 const confirm = useConfirm();
 const router = useRouter();
 const toast = useToast();
@@ -705,8 +707,10 @@ onBeforeMount(async () => {
                     <div class="flex align-items-center">
                       <p class="font-bold">Is it registered in B.C?</p>
                       <div
-                        v-tooltip.right="'Are you registered with OrgBook BC?'"
+                        v-tooltip.right="t('submissionIntakeForm.isRegisteredTooltip')"
+                        v-tooltip.focus.right="t('submissionIntakeForm.isRegisteredTooltip')"
                         class="pl-2"
+                        tabindex="0"
                       >
                         <font-awesome-icon icon="fa-solid fa-circle-question" />
                       </div>
@@ -841,11 +845,10 @@ onBeforeMount(async () => {
                         :invalid="!!errors.housing && meta.touched"
                       />
                       <div
-                        v-tooltip.right="
-                          `Multi-family dwelling: a residential building that contains two or more attached dwellings,
-                    including duplex, triplex, fourplex, townhouse, row houses, and apartment forms.`
-                        "
+                        v-tooltip.right="t('submissionIntakeForm.multiFamilyTooltip')"
+                        v-tooltip.focus.right="t('submissionIntakeForm.multiFamilyTooltip')"
                         class="pl-2"
+                        tabindex="0"
                       >
                         <font-awesome-icon icon="fa-solid fa-circle-question" />
                       </div>
@@ -899,10 +902,9 @@ onBeforeMount(async () => {
                 <div class="flex">
                   <span class="section-header">Will this project include rental units?</span>
                   <div
-                    v-tooltip.right="
-                      `Rental refers to a purpose built residentual unit, property,
-                  or dwelling that is available for long term rent by tenants.`
-                    "
+                    v-tooltip.right="t('submissionIntakeForm.rentalUnitsTooltip')"
+                    v-tooltip.focus.right="t('submissionIntakeForm.rentalUnitsTooltip')"
+                    tabindex="0"
                   >
                     <font-awesome-icon icon="fa-solid fa-circle-question" />
                   </div>
@@ -967,10 +969,10 @@ onBeforeMount(async () => {
                       </label>
                       <!-- eslint-disable max-len -->
                       <div
-                        v-tooltip.right="
-                          `BC Housing welcomes the opportunity to work with individuals and organizations to create affordable housing solutions.`
-                        "
+                        v-tooltip.right="t('submissionIntakeForm.bcHousingTooltip')"
+                        v-tooltip.focus.right="t('submissionIntakeForm.bcHousingTooltip')"
                         class="mb-2"
+                        tabindex="0"
                       >
                         <font-awesome-icon
                           class="pl-2"
@@ -1078,11 +1080,10 @@ onBeforeMount(async () => {
                   <div class="flex align-items-center">
                     <label>Provide additional information</label>
                     <div
-                      v-tooltip.right="
-                        `Provide us with additional information -
-                         short description about the project, project website link, or upload a document.`
-                      "
+                      v-tooltip.right="t('submissionIntakeForm.additionalInfoTooltip')"
+                      v-tooltip.focus.right="t('submissionIntakeForm.additionalInfoTooltip')"
                       class="pl-2 mb-2"
+                      tabindex="0"
                     >
                       <font-awesome-icon icon="fa-solid fa-circle-question" />
                     </div>
@@ -1185,7 +1186,9 @@ onBeforeMount(async () => {
                   <div class="flex flex-grow-1">
                     <span class="section-header">Provide one of the following project locations</span>
                     <div
-                      v-tooltip.right="`A civic address contains a street name and number where a non-civid does not.`"
+                      v-tooltip.right="t('submissionIntakeForm.addressTooltip')"
+                      v-tooltip.focus.right="t('submissionIntakeForm.addressTooltip')"
+                      tabindex="0"
                     >
                       <font-awesome-icon icon="fa-solid fa-circle-question" />
                     </div>
@@ -1465,10 +1468,9 @@ onBeforeMount(async () => {
                 <div class="flex">
                   <span class="section-header">Have you applied for any provincial permits for this project?</span>
                   <div
-                    v-tooltip.right="
-                      `Early information on your permitting needs will help us
-                    coordinate and expedite the authorization process.`
-                    "
+                    v-tooltip.right="t('submissionIntakeForm.appliedPermitsTooltip')"
+                    v-tooltip.focus.right="t('submissionIntakeForm.appliedPermitsTooltip')"
+                    tabindex="0"
                   >
                     <font-awesome-icon icon="fa-solid fa-circle-question" />
                   </div>
@@ -1494,6 +1496,7 @@ onBeforeMount(async () => {
                         values.permits?.hasAppliedProvincialPermits === BasicResponse.YES ||
                         values.permits?.hasAppliedProvincialPermits === BasicResponse.UNSURE
                       "
+                      ref="appliedPermitsContainer"
                       class="col-12"
                     >
                       <div class="mb-2">
@@ -1562,7 +1565,16 @@ onBeforeMount(async () => {
                                     permitTypeId: undefined,
                                     trackingId: undefined,
                                     submittedDate: undefined
-                                  })
+                                  });
+                                  nextTick(() => {
+                                    const addedPermit = getHTMLElement(
+                                      $refs.appliedPermitsContainer as HTMLElement,
+                                      'div[name*=\'permitTypeId\'] span[role=\'combobox\']'
+                                    );
+                                    if (addedPermit) {
+                                      addedPermit.focus();
+                                    }
+                                  });
                                 "
                               >
                                 <font-awesome-icon
@@ -1604,10 +1616,9 @@ onBeforeMount(async () => {
                     Select all provincially issued permits you think you might need (optional)
                   </span>
                   <div
-                    v-tooltip.right="
-                      `Early information on your permitting needs will help us
-                    coordinate and expedite the authorization process.`
-                    "
+                    v-tooltip.right="t('submissionIntakeForm.potentialPermitsTooltip')"
+                    v-tooltip.focus.right="t('submissionIntakeForm.potentialPermitsTooltip')"
+                    tabindex="0"
                   >
                     <font-awesome-icon icon="fa-solid fa-circle-question" />
                   </div>
@@ -1623,7 +1634,10 @@ onBeforeMount(async () => {
                     <div class="col-12">
                       <Card class="no-shadow">
                         <template #content>
-                          <div class="formgrid grid">
+                          <div
+                            ref="investigatePermitsContainer"
+                            class="formgrid grid"
+                          >
                             <div
                               v-for="(permit, idx) in fields"
                               :key="idx"
@@ -1662,9 +1676,16 @@ onBeforeMount(async () => {
                                 v-if="editable"
                                 class="w-full flex justify-content-center font-bold"
                                 @click="
-                                  push({
-                                    permitTypeId: undefined
-                                  })
+                                  push({ permitTypeId: undefined });
+                                  nextTick(() => {
+                                    const newPermitDropdown = getHTMLElement(
+                                      $refs.investigatePermitsContainer as HTMLElement,
+                                      'div[name*=\'investigatePermits\'] span[role=\'combobox\']'
+                                    );
+                                    if (newPermitDropdown) {
+                                      newPermitDropdown.focus();
+                                    }
+                                  });
                                 "
                               >
                                 <font-awesome-icon
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index dc575d1e..4b618db9 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -99,9 +99,6 @@ const { t } = useI18n();
       &:hover {
         text-decoration: underline;
       }
-      &:focus {
-        outline: none;
-      }
       &:visited {
         color: var(--text-color);
       }
diff --git a/frontend/src/locales/en-CA.json b/frontend/src/locales/en-CA.json
index 5d4bac5d..6721faa2 100644
--- a/frontend/src/locales/en-CA.json
+++ b/frontend/src/locales/en-CA.json
@@ -2,6 +2,13 @@
   "collectionDisclaimer": {
     "disclaimer": "This information is being collected under the legal authority of section 26 (c)(e) and 27 (1)(a)(i) of the Freedom of Information and Protection of Privacy Act (the Act) and is being used for the purpose of creating a client relationship between you or your organization and Government of British Columbia. It may also be shared when strictly necessary with partner agencies that are also subject to the provisions of the Act. Personal information may be used by the Permitting Solutions Branch for survey purposes. If you have any questions regarding the use of this personal information, please contact Housing Authorizations at"
   },
+  "deleteDocument": {
+    "deleteTooltip": "Delete document"
+  },
+  "enquiryIntakeForm": {
+    "projectIdTooltip": "Project ID can be found in the confirmation email you received at the time of submission.",
+    "registerEnquiryTooltip": "Consider registering if you are working or getting started on a housing project."
+  },
   "enquiryListProponent": {
     "enquiryId": "Enquiry ID",
     "listEmpty": "Submit a general enquiry for questions that are not related to existing projects",
@@ -99,5 +106,15 @@
     "lastEdited": "Last edited",
     "listEmpty": "Your project submission drafts will be displayed here",
     "of": "of"
+  },
+  "submissionIntakeForm": {
+    "additionalInfoTooltip": "Provide us with additional information - short description about the project, project website link, or upload a document.",
+    "addressTooltip": "A civic address contains a street name and number where a non-civid does not.",
+    "appliedPermitsTooltip": "Early information on your permitting needs will help us coordinate and expedite the authorization process.",
+    "bcHousingTooltip": "BC Housing welcomes the opportunity to work with individuals and organizations to create affordable housing solutions.",
+    "isRegisteredTooltip": "Are you registered with OrgBook BC?",
+    "multiFamilyTooltip": "Multi-family dwelling: a residential building that contains two or more attached dwellings, including duplex, triplex, fourplex, townhouse, row houses, and apartment forms.",
+    "potentialPermitsTooltip": "Early information on your permitting needs will help us coordinate and expedite the authorization process.",
+    "rentalUnitsTooltip": "Rental refers to a purpose built residentual unit, property, or dwelling that is available for long term rent by tenants."
   }
 }
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 894bf272..2690db02 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -114,6 +114,25 @@ export function getFilenameAndExtension(filename: string): { filename: string; e
   }
 }
 
+/**
+ * @function getHTMLElement
+ * Return element that is inside a given element/container
+ * @param {HTMLElement} container contains element to be found
+ * @param {string} query query used to find said element
+ * @param {number} index index of element that is desired, if undefined get only/last element
+ * @returns {HTMLElement | null} HTMLElement or null if no element/not an html element
+ */
+export function getHTMLElement(container: HTMLElement, query: string, index?: number): HTMLElement | null {
+  const elements = container.querySelectorAll(query);
+  const length = elements.length;
+
+  if (length === 0) return null;
+
+  const element = index !== undefined ? elements[index] : elements[length - 1];
+
+  return element instanceof HTMLElement ? element : null;
+}
+
 /**
  * @function isDebugMode
  * Checks if the app is currently running in debug mode
diff --git a/frontend/src/views/housing/HousingView.vue b/frontend/src/views/housing/HousingView.vue
index 8d9d39c5..a8463046 100644
--- a/frontend/src/views/housing/HousingView.vue
+++ b/frontend/src/views/housing/HousingView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import SubmissionDraftListProponent from '@/components/housing/submission/SubmissionDraftListProponent.vue';
 import { Button, Paginator } from '@/lib/primevue';
@@ -26,6 +26,7 @@ const loading: Ref<boolean> = ref(true);
 
 // Actions
 const { t } = useI18n();
+const route = useRoute();
 const router = useRouter();
 
 function onProjectClick(project: Submission) {
@@ -39,6 +40,19 @@ function onSubmissionDraftDelete(draftId: string) {
   drafts.value = drafts.value.filter((x) => x.draftId !== draftId);
 }
 
+watch(
+  () => route.hash,
+  async (newHash) => {
+    if (newHash) {
+      await nextTick();
+      const target = document.querySelector(newHash);
+      if (target && target instanceof HTMLElement) {
+        target.focus();
+      }
+    }
+  }
+);
+
 onMounted(async () => {
   [enquiries.value, projects.value, drafts.value] = (
     await Promise.all([
@@ -77,6 +91,7 @@ onMounted(async () => {
             hash: '#projects'
           }"
           class="no-underline"
+          @keydown.space.prevent="router.push({ name: RouteName.HOUSING, hash: '#projects' })"
         >
         {{ t('housing.myProjects') }}</router-link>
         |
@@ -86,6 +101,7 @@ onMounted(async () => {
             hash: '#drafts'
           }"
           class="no-underline"
+          @keydown.space.prevent="router.push({ name: RouteName.HOUSING, hash: '#drafts' })"
         >
         {{ t('housing.drafts') }}</router-link>
         |
@@ -95,6 +111,7 @@ onMounted(async () => {
             hash: '#enquiries'
           }"
           class="no-underline"
+          @keydown.space.prevent="router.push({ name: RouteName.HOUSING, hash: '#enquiries' })"
         >
         {{ t('housing.generalEnquiries') }}</router-link>
       </div>
@@ -108,24 +125,29 @@ onMounted(async () => {
       <h2
         id="projects"
         class="flex font-bold"
+        tabindex="-1"
       >
         {{ t('housing.myProjects') }}
         <div
           v-tooltip.right="t('housing.projectsTooltip')"
+          v-tooltip.focus.right="t('housing.projectsTooltip')"
           class="flex align-items-center pl-2 text-xl"
+          tabindex="0"
         >
           <font-awesome-icon icon="fa-solid fa-circle-info" />
         </div>
       </h2>
-      <router-link :to="{ name: RouteName.HOUSING_SUBMISSION_INTAKE }">
-        <Button>
-          {{ t('housing.submitNewProject') }}
-          <font-awesome-icon
-            class="ml-2"
-            icon="fa-solid fa-arrow-right"
-          />
-        </Button>
-      </router-link>
+      <Button
+        @click="router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE })"
+        @keydown.enter.prevent="router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE })"
+        @keydown.space.prevent="router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE })"
+      >
+        {{ t('housing.submitNewProject') }}
+        <font-awesome-icon
+          class="ml-2"
+          icon="fa-solid fa-arrow-right"
+        />
+      </Button>
     </div>
 
     <div class="w-full">
@@ -185,6 +207,7 @@ onMounted(async () => {
       <h2
         id="drafts"
         class="flex font-bold"
+        tabindex="-1"
       >
         {{ t('housing.drafts') }}
       </h2>
@@ -205,24 +228,29 @@ onMounted(async () => {
       <h2
         id="enquiries"
         class="flex font-bold"
+        tabindex="-1"
       >
         {{ t('housing.generalEnquiries') }}
         <div
           v-tooltip.right="t('housing.enquiriesTooltip')"
+          v-tooltip.focus.right="t('housing.enquiriesTooltip')"
           class="flex align-items-center pl-2 text-xl"
+          tabindex="0"
         >
           <font-awesome-icon icon="fa-solid fa-circle-info" />
         </div>
       </h2>
-      <router-link :to="{ name: RouteName.HOUSING_ENQUIRY_INTAKE }">
-        <Button>
-          {{ t('housing.submitNewEnquiry') }}
-          <font-awesome-icon
-            class="ml-2"
-            icon="fa-solid fa-arrow-right"
-          />
-        </Button>
-      </router-link>
+      <Button
+        @click="router.push({ name: RouteName.HOUSING_ENQUIRY_INTAKE })"
+        @keydown.enter.prevent="router.push({ name: RouteName.HOUSING_ENQUIRY_INTAKE })"
+        @keydown.space.prevent="router.push({ name: RouteName.HOUSING_ENQUIRY_INTAKE })"
+      >
+        {{ t('housing.submitNewEnquiry') }}
+        <font-awesome-icon
+          class="ml-2"
+          icon="fa-solid fa-arrow-right"
+        />
+      </Button>
     </div>
 
     <div class="w-full">
diff --git a/frontend/src/views/housing/project/ProjectView.vue b/frontend/src/views/housing/project/ProjectView.vue
index cf0c5f1d..d4a2c2e5 100644
--- a/frontend/src/views/housing/project/ProjectView.vue
+++ b/frontend/src/views/housing/project/ProjectView.vue
@@ -250,12 +250,25 @@ onMounted(async () => {
     <div class="mt-8 mb-2 flex justify-content-between align-items-center">
       <h1
         class="m-0 cursor-pointer hover:underline"
+        tabindex="0"
         @click="
           router.push({
             name: RouteName.HOUSING_SUBMISSION,
             query: { activityId: getSubmission?.activityId, submissionId: getSubmission?.submissionId }
           })
         "
+        @keydown.enter.prevent="
+          router.push({
+            name: RouteName.HOUSING_SUBMISSION,
+            query: { activityId: getSubmission?.activityId, submissionId: getSubmission?.submissionId }
+          })
+        "
+        @keydown.space.prevent="
+          router.push({
+            name: RouteName.HOUSING_SUBMISSION,
+            query: { activityId: getSubmission?.activityId, submissionId: getSubmission?.submissionId }
+          })
+        "
       >
         {{ getSubmission.projectName }}
         <font-awesome-icon
diff --git a/frontend/src/views/permit/PermitStatusView.vue b/frontend/src/views/permit/PermitStatusView.vue
index 8fc60c57..61d38da9 100644
--- a/frontend/src/views/permit/PermitStatusView.vue
+++ b/frontend/src/views/permit/PermitStatusView.vue
@@ -316,7 +316,10 @@ onBeforeMount(async () => {
       />
       <span
         class="status-description"
+        tabindex="0"
         @click="descriptionModalVisible = true"
+        @keydown.enter.prevent="descriptionModalVisible = true"
+        @keydown.space.prevent="descriptionModalVisible = true"
       >
         What does the status mean?
       </span>
diff --git a/frontend/tests/unit/components/file/DeleteDocument.spec.ts b/frontend/tests/unit/components/file/DeleteDocument.spec.ts
index da3dafe3..922fb087 100644
--- a/frontend/tests/unit/components/file/DeleteDocument.spec.ts
+++ b/frontend/tests/unit/components/file/DeleteDocument.spec.ts
@@ -10,6 +10,12 @@ import Tooltip from 'primevue/tooltip';
 
 import type { Document } from '@/types';
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn()
+  })
+}));
+
 vi.mock('vue-router', () => ({
   useRouter: () => ({
     push: vi.fn(),
diff --git a/frontend/tests/unit/components/file/DocumentCard.spec.ts b/frontend/tests/unit/components/file/DocumentCard.spec.ts
index 82c4fd21..f97c0bd6 100644
--- a/frontend/tests/unit/components/file/DocumentCard.spec.ts
+++ b/frontend/tests/unit/components/file/DocumentCard.spec.ts
@@ -14,6 +14,12 @@ import type { Document } from '@/types';
 
 const useUserService = vi.spyOn(userService, 'searchUsers');
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn()
+  })
+}));
+
 vi.mock('vue-router', () => ({
   useRouter: () => ({
     push: vi.fn(),
diff --git a/frontend/tests/unit/views/housing/HousingView.spec.ts b/frontend/tests/unit/views/housing/HousingView.spec.ts
index 031362c2..1cd62169 100644
--- a/frontend/tests/unit/views/housing/HousingView.spec.ts
+++ b/frontend/tests/unit/views/housing/HousingView.spec.ts
@@ -13,6 +13,11 @@ vi.mock('vue-i18n', () => ({
 }));
 
 vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    query: {},
+    params: {},
+    name: 'housing-route'
+  }),
   useRouter: () => ({
     push: vi.fn()
   })