Ensured and added keyboard navigation for public facing components

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"

frontend/src/components/common/Breadcrumb.vue

@@ -52,6 +52,6 @@ a {
 
 .p-breadcrumb {
   border: none;
-  padding: 0rem;
+  padding: 0.125rem;
 }
 </style>

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"

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

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

@@ -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>

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

@@ -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

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/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."
   }
 }