From 36482f760b4508d1e67dd52e0bea5edc6e319bc7 Mon Sep 17 00:00:00 2001
From: qhanson55 <quinnhanson55@gmail.com>
Date: Tue, 24 Dec 2024 10:30:28 -0800
Subject: [PATCH] Ensured and added keyboard navigation for public facing
 components

---
 frontend/src/components/common/BackButton.vue | 15 ++--
 .../src/components/file/DeleteDocument.vue    |  2 +
 frontend/src/components/file/DocumentCard.vue |  2 +
 .../src/components/file/DocumentCardLite.vue  |  2 +
 .../housing/enquiry/EnquiryIntakeForm.vue     | 10 ++-
 .../submission/SubmissionAssistance.vue       |  8 +++
 .../submission/SubmissionIntakeForm.vue       | 67 ++++++++++++++++--
 frontend/src/components/layout/Footer.vue     |  3 -
 frontend/src/utils/utils.ts                   | 21 ++++++
 frontend/src/views/housing/HousingView.vue    | 68 +++++++++++++------
 .../src/views/housing/project/ProjectView.vue | 13 ++++
 .../src/views/permit/PermitStatusView.vue     |  3 +
 12 files changed, 177 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/common/BackButton.vue b/frontend/src/components/common/BackButton.vue
index b911fb7a..e2a55092 100644
--- a/frontend/src/components/common/BackButton.vue
+++ b/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"
diff --git a/frontend/src/components/file/DeleteDocument.vue b/frontend/src/components/file/DeleteDocument.vue
index 33614446..9e3f1b7f 100644
--- a/frontend/src/components/file/DeleteDocument.vue
+++ b/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);
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..0435d621 100644
--- a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
+++ b/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>
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 96044e70..8ac19c6e 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/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
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/utils/utils.ts b/frontend/src/utils/utils.ts
index 894bf272..ad1943df 100644
--- a/frontend/src/utils/utils.ts
+++ b/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
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 bfbda159..04e4c2c6 100644
--- a/frontend/src/views/housing/project/ProjectView.vue
+++ b/frontend/src/views/housing/project/ProjectView.vue
@@ -238,12 +238,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>