From 59ed470c609e4a8680b4282a635c127d200521bd Mon Sep 17 00:00:00 2001
From: qhanson55 <quinnhanson55@gmail.com>
Date: Thu, 19 Dec 2024 18:10:58 -0800
Subject: [PATCH] Ensured and added keyboard navigation for public facing
 components

---
 .../submission/SubmissionAssistance.vue       |  8 +++++
 .../submission/SubmissionIntakeForm.vue       | 32 +++++++++++++++----
 frontend/src/components/layout/Footer.vue     |  3 --
 frontend/src/utils/utils.ts                   | 21 ++++++++++++
 4 files changed, 55 insertions(+), 9 deletions(-)

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..2aa91999 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';
@@ -1498,6 +1498,7 @@ onBeforeMount(async () => {
                         values.permits?.hasAppliedProvincialPermits === BasicResponse.UNSURE
                       "
                       class="col-12"
+                      ref="appliedPermitsContainer"
                     >
                       <div class="mb-2">
                         <span class="app-primary-color">
@@ -1565,7 +1566,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
@@ -1626,7 +1636,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 +1678,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