Ensured and added keyboard navigation for public facing components

frontend/src/components/common/BackButton.vue

@@ -38,14 +38,15 @@ function onConfirmLeave() {
     v-if="!confirmLeave"
     class="p-0"
     text
+    @click="router.push({ name: routeName })"
+    @keydown.enter.prevent="router.push({ name: routeName })"
+    @keydown.space.prevent="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"

frontend/src/components/file/DeleteDocument.vue

@@ -43,10 +43,12 @@ const confirmDelete = (document: Document) => {
 <template>
   <Button
     v-tooltip.bottom="'Delete document'"
+    v-tooltip.focus.bottom="'Delete document'"
     :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);

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>

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>

frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue

@@ -370,6 +370,10 @@ onBeforeMount(async () => {
               v-tooltip.right="
                 `Project ID can be found in the confirmation email you received at the time of submission.`
               "
+              v-tooltip.focus.right="
+                `Project ID can be found in the confirmation email you received at the time of submission.`
+              "
+              tabindex="0"
             >
               <font-awesome-icon icon="fa-solid fa-circle-question" />
             </div>
@@ -416,7 +420,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="`Consider registering if you are working or getting started on a housing project.`"
+              v-tooltip.focus.right="`Consider registering if you are working or getting started on a housing project.`"
+              tabindex="0"
+            >
               <font-awesome-icon icon="fa-solid fa-circle-question" />
             </div>
           </div>

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;

frontend/src/components/housing/submission/SubmissionIntakeForm.vue

@@ -58,7 +58,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';
@@ -709,7 +709,9 @@ onBeforeMount(async () => {
                       <p class="font-bold">Is it registered in B.C?</p>
                       <div
                         v-tooltip.right="'Are you registered with OrgBook BC?'"
+                        v-tooltip.focus.right="'Are you registered with OrgBook BC?'"
                         class="pl-2"
+                        tabindex="0"
                       >
                         <font-awesome-icon icon="fa-solid fa-circle-question" />
                       </div>
@@ -846,9 +848,14 @@ onBeforeMount(async () => {
                       <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.focus.right="
+                          `Multi-family dwelling: a residential building that contains two or more attached dwellings,
                     including duplex, triplex, fourplex, townhouse, row houses, and apartment forms.`
                         "
                         class="pl-2"
+                        tabindex="0"
                       >
                         <font-awesome-icon icon="fa-solid fa-circle-question" />
                       </div>
@@ -906,6 +913,11 @@ onBeforeMount(async () => {
                       `Rental refers to a purpose built residentual unit, property,
                   or dwelling that is available for long term rent by tenants.`
                     "
+                    v-tooltip.focus.right="
+                      `Rental refers to a purpose built residentual unit, property,
+                  or dwelling that is available for long term rent by tenants.`
+                    "
+                    tabindex="0"
                   >
                     <font-awesome-icon icon="fa-solid fa-circle-question" />
                   </div>
@@ -973,7 +985,11 @@ onBeforeMount(async () => {
                         v-tooltip.right="
                           `BC Housing welcomes the opportunity to work with individuals and organizations to create affordable housing solutions.`
                         "
+                        v-tooltip.focus.right="
+                          `BC Housing welcomes the opportunity to work with individuals and organizations to create affordable housing solutions.`
+                        "
                         class="mb-2"
+                        tabindex="0"
                       >
                         <font-awesome-icon
                           class="pl-2"
@@ -1085,7 +1101,12 @@ onBeforeMount(async () => {
                         `Provide us with additional information -
                          short description about the project, project website link, or upload a document.`
                       "
+                      v-tooltip.focus.right="
+                        `Provide us with additional information -
+                         short description about the project, project website link, or upload a document.`
+                      "
                       class="pl-2 mb-2"
+                      tabindex="0"
                     >
                       <font-awesome-icon icon="fa-solid fa-circle-question" />
                     </div>
@@ -1189,6 +1210,10 @@ onBeforeMount(async () => {
                     <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.focus.right="
+                        `A civic address contains a street name and number where a non-civid does not.`
+                      "
+                      tabindex="0"
                     >
                       <font-awesome-icon icon="fa-solid fa-circle-question" />
                     </div>
@@ -1472,6 +1497,11 @@ onBeforeMount(async () => {
                       `Early information on your permitting needs will help us
                     coordinate and expedite the authorization process.`
                     "
+                    v-tooltip.focus.right="
+                      `Early information on your permitting needs will help us
+                    coordinate and expedite the authorization process.`
+                    "
+                    tabindex="0"
                   >
                     <font-awesome-icon icon="fa-solid fa-circle-question" />
                   </div>
@@ -1498,6 +1528,7 @@ onBeforeMount(async () => {
                         values.permits?.hasAppliedProvincialPermits === BasicResponse.UNSURE
                       "
                       class="col-12"
+                      ref="appliedPermitsContainer"
                     >
                       <div class="mb-2">
                         <span class="app-primary-color">
@@ -1565,7 +1596,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
@@ -1611,6 +1651,11 @@ onBeforeMount(async () => {
                       `Early information on your permitting needs will help us
                     coordinate and expedite the authorization process.`
                     "
+                    v-tooltip.focus.right="
+                      `Early information on your permitting needs will help us
+                    coordinate and expedite the authorization process.`
+                    "
+                    tabindex="0"
                   >
                     <font-awesome-icon icon="fa-solid fa-circle-question" />
                   </div>
@@ -1626,7 +1671,10 @@ onBeforeMount(async () => {
                     <div class="col-12">
                       <Card class="no-shadow">
                         <template #content>
-                          <div class="formgrid grid">
+                          <div
+                            class="formgrid grid"
+                            ref="investigatePermitsContainer"
+                          >
                             <div
                               v-for="(permit, idx) in fields"
                               :key="idx"
@@ -1665,9 +1713,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

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);
       }

frontend/src/utils/utils.ts

@@ -114,6 +114,27 @@ 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 {
+  console.log(container);
+  const elements = container.querySelectorAll(query);
+  console.log(elements);
+  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