Merge pull request #158 from bcgov/feature/accessibility

Accessibility updates
bcgov · Sep 12, 2024 · 85e1b89 · 85e1b89
2 parents 30cac1a + 05ea57c
commit 85e1b89
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -111,29 +111,43 @@ 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"
           >
             <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;