Begin A11y unit testing integration (#2014)

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",

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>

ppr-ui/src/components/common/InputFieldDatePicker.vue

@@ -32,6 +32,7 @@
           readonly
           variant="filled"
           color="primary"
+          aria-label="date-text-field"
         />
       </template>
       <v-card

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"

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>

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

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

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)

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)

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)