From 05ea57ccf469ded8c72316787bdc7c11d694c627 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kyle.1.morel@gov.bc.ca>
Date: Tue, 10 Sep 2024 14:20:24 -0700
Subject: [PATCH] Added aria labelledby for form components. Fixed navbar
 keyboard nav

---
 frontend/src/components/form/AutoComplete.vue |  2 ++
 frontend/src/components/form/Calendar.vue     |  2 ++
 frontend/src/components/form/Checkbox.vue     |  2 ++
 .../src/components/form/EditableDropdown.vue  |  2 ++
 frontend/src/components/form/InputNumber.vue  |  2 ++
 frontend/src/components/form/Password.vue     |  2 ++
 frontend/src/components/form/RadioList.vue    |  3 +++
 .../src/components/form/StepperNavigation.vue |  2 ++
 frontend/src/components/form/TextArea.vue     |  2 ++
 .../form/internal/DropdownInternal.vue        |  3 +++
 .../form/internal/InputMaskInternal.vue       |  2 ++
 .../form/internal/InputTextInternal.vue       |  2 ++
 frontend/src/components/layout/Navbar.vue     | 26 +++++++++++++++++--
 13 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/form/AutoComplete.vue b/frontend/src/components/form/AutoComplete.vue
index 0ae77564..17c5b732 100644
--- a/frontend/src/components/form/AutoComplete.vue
+++ b/frontend/src/components/form/AutoComplete.vue
@@ -45,6 +45,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 <template>
   <div class="field">
     <label
+      :id="`${name}-label`"
       :class="{ 'font-bold': bold }"
       :for="name"
     >
@@ -53,6 +54,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
     <AutoComplete
       v-model="value"
       :aria-describedby="`${name}-help`"
+      :aria-labelledby="`${name}-label`"
       class="w-full"
       :class="{ 'p-invalid': errorMessage }"
       :delay="delay"
diff --git a/frontend/src/components/form/Calendar.vue b/frontend/src/components/form/Calendar.vue
index 577e9119..03fc80bf 100644
--- a/frontend/src/components/form/Calendar.vue
+++ b/frontend/src/components/form/Calendar.vue
@@ -33,6 +33,7 @@ const { errorMessage, value } = useField<Date>(toRef(props, 'name'));
 <template>
   <div class="field">
     <label
+      :id="`${name}-label`"
       :class="{ 'font-bold': bold }"
       :for="name"
     >
@@ -41,6 +42,7 @@ const { errorMessage, value } = useField<Date>(toRef(props, 'name'));
     <Calendar
       v-model="value"
       :aria-describedby="`${name}-help`"
+      :aria-labelledby="`${name}-label`"
       :name="name"
       class="w-full"
       :class="{ 'p-invalid': errorMessage }"
diff --git a/frontend/src/components/form/Checkbox.vue b/frontend/src/components/form/Checkbox.vue
index 86fa89fc..b05790bc 100644
--- a/frontend/src/components/form/Checkbox.vue
+++ b/frontend/src/components/form/Checkbox.vue
@@ -33,11 +33,13 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
         v-model="value"
         binary
         :aria-describedby="`${name}-help`"
+        :aria-labelledby="`${name}-label`"
         :name="name"
         :class="{ 'p-invalid': errorMessage || invalid }"
         :disabled="disabled"
       />
       <label
+        :id="`${name}-label`"
         class="pl-2 mb-0"
         :class="{ 'font-bold': bold }"
         :for="name"
diff --git a/frontend/src/components/form/EditableDropdown.vue b/frontend/src/components/form/EditableDropdown.vue
index 7eebf0ef..1a48a4a2 100644
--- a/frontend/src/components/form/EditableDropdown.vue
+++ b/frontend/src/components/form/EditableDropdown.vue
@@ -37,6 +37,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 <template>
   <div class="field">
     <label
+      :id="`${name}-label`"
       :class="{ 'font-bold': bold }"
       :for="name"
     >
@@ -46,6 +47,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
       v-model="value"
       editable
       :aria-describedby="`${name}-help`"
+      :aria-labelledby="`${name}-label`"
       :name="name"
       :placeholder="placeholder"
       class="w-full"
diff --git a/frontend/src/components/form/InputNumber.vue b/frontend/src/components/form/InputNumber.vue
index 2bdff1ca..653dd357 100644
--- a/frontend/src/components/form/InputNumber.vue
+++ b/frontend/src/components/form/InputNumber.vue
@@ -30,6 +30,7 @@ const { errorMessage, value } = useField<number>(toRef(props, 'name'));
 <template>
   <div class="field">
     <label
+      :id="`${name}-label`"
       :class="{ 'font-bold': bold }"
       :for="name"
     >
@@ -38,6 +39,7 @@ const { errorMessage, value } = useField<number>(toRef(props, 'name'));
     <InputNumber
       v-model="value"
       :aria-describedby="`${name}-help`"
+      :aria-labelledby="`${name}-label`"
       :name="name"
       :placeholder="placeholder"
       class="w-full"
diff --git a/frontend/src/components/form/Password.vue b/frontend/src/components/form/Password.vue
index 776885b8..8abac21f 100644
--- a/frontend/src/components/form/Password.vue
+++ b/frontend/src/components/form/Password.vue
@@ -27,6 +27,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 <template>
   <div class="field">
     <label
+      :id="`${name}-label`"
       :class="{ 'font-bold': bold }"
       :for="props.name"
     >
@@ -35,6 +36,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
     <Password
       v-model="value"
       :aria-describedby="`${props.name}-help`"
+      :aria-labelledby="`${name}-label`"
       :name="props.name"
       :type="props.type"
       :placeholder="props.placeholder"
diff --git a/frontend/src/components/form/RadioList.vue b/frontend/src/components/form/RadioList.vue
index 18ac2540..4c61396d 100644
--- a/frontend/src/components/form/RadioList.vue
+++ b/frontend/src/components/form/RadioList.vue
@@ -46,6 +46,8 @@ watch(value, () => {
         <div>
           <RadioButton
             v-model="value"
+            :aria-describedby="`${name}-help`"
+            :aria-labelledby="`${name}-option-${option}`"
             :input-id="option"
             :name="name"
             :value="option"
@@ -54,6 +56,7 @@ watch(value, () => {
             @click="emit('onClick', value)"
           />
           <span
+            :id="`${name}-option-${option}`"
             :for="option"
             class="ml-2 mb-0"
           >
diff --git a/frontend/src/components/form/StepperNavigation.vue b/frontend/src/components/form/StepperNavigation.vue
index c12ad30a..a0ca1d25 100644
--- a/frontend/src/components/form/StepperNavigation.vue
+++ b/frontend/src/components/form/StepperNavigation.vue
@@ -39,6 +39,7 @@ function handlePrevClick() {
 <template>
   <div class="flex pt-4 justify-content-between">
     <Button
+      aria-label="Go to previous page"
       :class="props.prevDisabled ? 'button-hidden' : 'button-visible'"
       class="px-4 py-1"
       outlined
@@ -49,6 +50,7 @@ function handlePrevClick() {
     />
     <slot name="content" />
     <Button
+      aria-label="Go to next page"
       :class="props.nextDisabled ? 'button-hidden' : 'button-visible'"
       class="px-4 py-1"
       outlined
diff --git a/frontend/src/components/form/TextArea.vue b/frontend/src/components/form/TextArea.vue
index 21f902a9..8950b2fc 100644
--- a/frontend/src/components/form/TextArea.vue
+++ b/frontend/src/components/form/TextArea.vue
@@ -31,6 +31,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 <template>
   <div class="field">
     <label
+      :id="`${name}-label`"
       :class="{ 'font-bold': bold }"
       :for="name"
     >
@@ -39,6 +40,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
     <Textarea
       v-model="value"
       :aria-describedby="`${name}-help`"
+      :aria-labelledby="`${name}-label`"
       :name="name"
       :placeholder="placeholder"
       class="w-full"
diff --git a/frontend/src/components/form/internal/DropdownInternal.vue b/frontend/src/components/form/internal/DropdownInternal.vue
index 1307e386..f7dffe0a 100644
--- a/frontend/src/components/form/internal/DropdownInternal.vue
+++ b/frontend/src/components/form/internal/DropdownInternal.vue
@@ -44,6 +44,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
   <!-- Label needs to be set differently depending if it's floating or not -->
   <label
     v-if="!props.floatLabel"
+    :id="`${name}-label`"
     :class="{ 'font-bold': bold }"
     :for="name"
   >
@@ -52,6 +53,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
   <Dropdown
     v-model="value"
     :aria-describedby="`${name}-help`"
+    :aria-labelledby="`${name}-label`"
     :name="name"
     :placeholder="placeholder"
     class="w-full"
@@ -65,6 +67,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
   />
   <label
     v-if="props.floatLabel"
+    :id="`${name}-label`"
     :class="{ 'font-bold': bold }"
     :for="name"
   >
diff --git a/frontend/src/components/form/internal/InputMaskInternal.vue b/frontend/src/components/form/internal/InputMaskInternal.vue
index 7e6eaa44..aa9fb78b 100644
--- a/frontend/src/components/form/internal/InputMaskInternal.vue
+++ b/frontend/src/components/form/internal/InputMaskInternal.vue
@@ -23,6 +23,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <label
+    :id="`${name}-label`"
     :class="{ 'font-bold': bold }"
     :for="name"
   >
@@ -31,6 +32,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
   <InputMask
     v-model="value"
     :aria-describedby="`${name}-help`"
+    :aria-labelledby="`${name}-label`"
     :name="name"
     :mask="mask"
     :placeholder="placeholder"
diff --git a/frontend/src/components/form/internal/InputTextInternal.vue b/frontend/src/components/form/internal/InputTextInternal.vue
index 4b509710..ea3fa9af 100644
--- a/frontend/src/components/form/internal/InputTextInternal.vue
+++ b/frontend/src/components/form/internal/InputTextInternal.vue
@@ -26,6 +26,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 
 <template>
   <label
+    :id="`${name}-label`"
     :class="{ 'font-bold': bold }"
     :for="name"
   >
@@ -34,6 +35,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
   <InputText
     v-model="value"
     :aria-describedby="`${name}-help`"
+    :aria-labelledby="`${name}-label`"
     :name="name"
     :placeholder="placeholder"
     class="w-full"
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index 9146fd6f..ddfeff5a 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -111,22 +111,35 @@ onMounted(() => {
             custom
           >
             <a
+              :aria-labelledby="item.label as string"
               :href="href"
               v-bind="props.action"
               @click="navigate"
             >
-              <span class="flex">{{ item.label }}</span>
+              <span
+                :id="item.label as string"
+                class="flex"
+              >
+                {{ item.label }}
+              </span>
             </a>
           </router-link>
           <a
             v-else-if="item.mailTo"
+            :aria-labelledby="item.label as string"
             :href="item.mailTo"
             class="mail-link"
           >
-            <span class="flex">{{ item.label }}</span>
+            <span
+              :id="item.label as string"
+              class="flex"
+            >
+              {{ item.label }}
+            </span>
           </a>
           <a
             v-else
+            :aria-labelledby="item.label as string"
             :href="item.url"
             :target="item.target"
             v-bind="props.action"
@@ -134,6 +147,7 @@ onMounted(() => {
             <span class="flex">{{ item.label }}</span>
             <span
               v-if="hasSubmenu"
+              :id="item.label as string"
               class="pi pi-angle-down mt-1 ml-1"
             />
           </a>
@@ -157,6 +171,14 @@ onMounted(() => {
     border: none;
     padding: 0;
 
+    :deep(.p-menuitem) {
+      &.p-focus {
+        > .p-menuitem-content {
+          background-color: #5a7da9;
+        }
+      }
+    }
+
     :deep(.p-menuitem-content) {
       background-color: #38598a;
       border-radius: 0;