From 4541a589ab4156b86afe0de6ed65facb64ab721b Mon Sep 17 00:00:00 2001
From: Cameron Bowler <cameron.bowler@ca.ey.com>
Date: Tue, 3 Sep 2024 06:00:14 -0700
Subject: [PATCH] Begin A11y unit testing integration

---
 ppr-ui/package-lock.json                           |  4 ++--
 ppr-ui/package.json                                |  2 +-
 .../vehicleCollateral/VehicleCollateral.vue        |  5 +++--
 .../src/components/common/InputFieldDatePicker.vue |  1 +
 ppr-ui/src/components/common/Stepper.vue           |  1 +
 .../AddEditCommissionOrder.vue                     |  3 +++
 .../securities-act-notices/AddEditCourtOrder.vue   |  6 ++++++
 ppr-ui/src/views/newRegistration/AddCollateral.vue | 12 +++++++++---
 ppr-ui/tests/unit/AddCollateral.spec.ts            | 10 ++++++++++
 ppr-ui/tests/unit/AddEditCommissionOrder.spec.ts   | 14 +++++++++++++-
 ppr-ui/tests/unit/AddEditCourtOrder.spec.ts        | 14 +++++++++++++-
 11 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index 2b16849c3..191608d2d 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.50",
+  "version": "3.2.51",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.50",
+      "version": "3.2.51",
       "dependencies": {
         "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index 1bdf947c6..b1e54da45 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.50",
+  "version": "3.2.51",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue b/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
index 870f59659..9c51da1bd 100644
--- a/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
+++ b/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
@@ -28,7 +28,7 @@
               <tr>
                 <th
                   v-for="header in headers"
-                  :key="header.value"
+                  :key="header.value as string"
                   :class="header.class"
                   class="pa-2"
                 >
@@ -164,8 +164,9 @@
               <tr>
                 <th
                   v-for="header in headers"
-                  :key="header.value"
+                  :key="header.value as string"
                   :class="header.class"
+                  :aria-hidden="header.value === 'edit'"
                 >
                   {{ header.text }}
                 </th>
diff --git a/ppr-ui/src/components/common/InputFieldDatePicker.vue b/ppr-ui/src/components/common/InputFieldDatePicker.vue
index 17987827f..a56a9fdc6 100644
--- a/ppr-ui/src/components/common/InputFieldDatePicker.vue
+++ b/ppr-ui/src/components/common/InputFieldDatePicker.vue
@@ -32,6 +32,7 @@
           readonly
           variant="filled"
           color="primary"
+          aria-label="date-text-field"
         />
       </template>
       <v-card
diff --git a/ppr-ui/src/components/common/Stepper.vue b/ppr-ui/src/components/common/Stepper.vue
index f2d34ad48..40048ab73 100644
--- a/ppr-ui/src/components/common/Stepper.vue
+++ b/ppr-ui/src/components/common/Stepper.vue
@@ -22,6 +22,7 @@
           :ripple="false"
           :icon="step.icon"
           size="56"
+          :aria-label="step.id"
         >
           <v-icon
             class="step-icon"
diff --git a/ppr-ui/src/components/registration/securities-act-notices/AddEditCommissionOrder.vue b/ppr-ui/src/components/registration/securities-act-notices/AddEditCommissionOrder.vue
index a3e27bfcd..5a7d906a9 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/AddEditCommissionOrder.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/AddEditCommissionOrder.vue
@@ -2,6 +2,7 @@
   <FormCard
     id="add-edit-commission-order"
     :label="`${addEditLabel} Securities Commission Order`"
+    role="form"
   >
     <template #formSlot>
       <v-form
@@ -19,6 +20,7 @@
               label="Commission Order Number"
               persistentHint
               :rules="fileNumberRules"
+              aria-label="commission-order-number"
             />
           </v-col>
         </v-row>
@@ -57,6 +59,7 @@
               counter="512"
               persistentCounter
               :rules="effectOfOrderRules"
+              aria-label="effect-of-order"
             >
               <template #counter="{ counter }">
                 <span>Characters: {{ counter }}</span>
diff --git a/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue b/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
index 75d9a062d..62514cb3b 100644
--- a/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
+++ b/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
@@ -2,6 +2,8 @@
   <FormCard
     id="add-edit-court-order"
     :label="`${addEditLabel} Court Order`"
+    role="form"
+    aria-label="Add or edit court order"
   >
     <template #formSlot>
       <v-form
@@ -21,6 +23,7 @@
               label="Court Name"
               hint="For example: Supreme Court of British Columbia"
               persistentHint
+              aria-label="court-name-text-field"
               :rules="nameRules"
             />
           </v-col>
@@ -39,6 +42,7 @@
               label="Court Registry"
               hint="The location (city) of the court. For example: Richmond"
               persistentHint
+              aria-label="court-registry-text-field"
               :rules="registryRules"
             />
           </v-col>
@@ -56,6 +60,7 @@
               color="primary"
               label="Court File Number"
               persistentHint
+              aria-label="court-file-number-text-field"
               :rules="fileNumberRules"
             />
           </v-col>
@@ -98,6 +103,7 @@
               label="Effect of Order (Optional)"
               counter="512"
               persistentCounter
+              aria-label="effect-of-order-text-area"
               :rules="effectOfOrderRules"
             >
               <template #counter="{ counter }">
diff --git a/ppr-ui/src/views/newRegistration/AddCollateral.vue b/ppr-ui/src/views/newRegistration/AddCollateral.vue
index d4e78ff4c..bd006a966 100644
--- a/ppr-ui/src/views/newRegistration/AddCollateral.vue
+++ b/ppr-ui/src/views/newRegistration/AddCollateral.vue
@@ -1,12 +1,18 @@
 <template>
-  <v-container
+  <span
     v-if="dataLoaded"
     class="footer-view-container pa-0"
   >
     <div class="py-0">
       <div class="container pa-0 pt-4">
         <v-row noGutters>
-          <v-col cols="9">
+          <v-col
+            cols="9"
+            role="region"
+          >
+            <v-btn>
+              Close Button
+            </v-btn>
             <v-row
               id="registration-header"
               noGutters
@@ -74,7 +80,7 @@
         />
       </v-col>
     </v-row>
-  </v-container>
+  </span>
 </template>
 
 <script lang="ts">
diff --git a/ppr-ui/tests/unit/AddCollateral.spec.ts b/ppr-ui/tests/unit/AddCollateral.spec.ts
index 7965fb6b5..9be06674f 100644
--- a/ppr-ui/tests/unit/AddCollateral.spec.ts
+++ b/ppr-ui/tests/unit/AddCollateral.spec.ts
@@ -10,6 +10,9 @@ import flushPromises from 'flush-promises'
 import { LengthTrustIF } from '@/interfaces'
 import { RegistrationTypes } from '@/resources'
 import { nextTick } from 'vue'
+import { expect, it } from 'vitest'
+import { axe } from 'vitest-axe'
+import { shallowMount } from '@vue/test-utils'
 
 const store = useStore()
 
@@ -44,6 +47,13 @@ describe('Add Collateral new registration component', () => {
     await nextTick()
   })
 
+  it('should have no accessibility violations', async () => {
+    // Run the axe-core accessibility check on the component's HTML
+    const results = await axe(wrapper.html())
+    // Use the custom vitest-axe matcher to check for violations
+    expect(results).toHaveNoViolations()
+  })
+
   it('renders Add Collateral View with child components when store is set', async () => {
     expect(wrapper.vm.$route.name).toBe(RouteNames.ADD_COLLATERAL)
     expect(wrapper.vm.appReady).toBe(true)
diff --git a/ppr-ui/tests/unit/AddEditCommissionOrder.spec.ts b/ppr-ui/tests/unit/AddEditCommissionOrder.spec.ts
index 51c3f56b9..b2d3b347f 100644
--- a/ppr-ui/tests/unit/AddEditCommissionOrder.spec.ts
+++ b/ppr-ui/tests/unit/AddEditCommissionOrder.spec.ts
@@ -1,8 +1,9 @@
 import { nextTick } from 'vue'
 import { createComponent } from './utils'
 import { AddEditCommissionOrder } from '@/components/registration'
-import { beforeEach } from 'vitest'
+import { beforeEach, expect, it } from 'vitest'
 import flushPromises from 'flush-promises'
+import { axe } from 'vitest-axe'
 
 const mockCommissionOrder = {
   courtOrder: false,
@@ -21,6 +22,17 @@ describe('AddEditCommissionOrder', () => {
     })
   })
 
+  it('should have no accessibility violations', async () => {
+    // Run the axe-core accessibility check on the component's HTML
+    const results = await axe(wrapper.element, {
+      rules: {
+        'aria-allowed-attr': { enabled: false } // Disabling this rule as it is inheriting an issue from vuetify
+      }
+    })
+    // Use the custom vitest-axe matcher to check for violations
+    expect(results).toHaveNoViolations()
+  })
+
   it('renders the form and input fields', () => {
     expect(wrapper.findComponent(AddEditCommissionOrder).exists()).toBe(true)
     expect(wrapper.find('#commission-order-number').exists()).toBe(true)
diff --git a/ppr-ui/tests/unit/AddEditCourtOrder.spec.ts b/ppr-ui/tests/unit/AddEditCourtOrder.spec.ts
index fd38739dc..ec3741b7d 100644
--- a/ppr-ui/tests/unit/AddEditCourtOrder.spec.ts
+++ b/ppr-ui/tests/unit/AddEditCourtOrder.spec.ts
@@ -1,8 +1,9 @@
 import { nextTick } from 'vue'
 import { createComponent } from './utils'
 import { AddEditCourtOrder, AddEditNotice } from '@/components/registration'
-import { beforeEach } from 'vitest'
+import { beforeEach, expect, it } from 'vitest'
 import flushPromises from 'flush-promises'
+import { axe } from 'vitest-axe'
 
 const mockCourtOrder = {
   courtOrder: true,
@@ -23,6 +24,17 @@ describe('AddEditCourtOrder', () => {
     })
   })
 
+  it('should have no accessibility violations', async () => {
+    // Run the axe-core accessibility check on the component's HTML
+    const results = await axe(wrapper.element, {
+      rules: {
+        'aria-allowed-attr': { enabled: false } // Disabling this rule as it is inheriting an issue from vuetify
+      }
+    })
+    // Use the custom vitest-axe matcher to check for violations
+    expect(results).toHaveNoViolations()
+  })
+
   it('renders the form and input fields', () => {
     expect(wrapper.findComponent(AddEditCourtOrder).exists()).toBe(true)
     expect(wrapper.find('#txt-court-name').exists()).toBe(true)