Home Owners Table - A11Y

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.54",
+  "version": "3.2.55",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue

@@ -3,6 +3,7 @@
     id="home-owner-table-card"
     flat
     rounded
+    role="region"
     :class="{ 'border-error-left': showTableError && !hideTableErrors }"
   >
     <BaseDialog
@@ -14,8 +15,9 @@
     <v-table
       id="mhr-home-owners-table"
       class="home-owners-table"
-      :class="{ 'review-mode': isReadonlyTable }"
       itemKey="groupId"
+      role="presentation"
+      :class="{ 'review-mode': isReadonlyTable }"
       :groupBy="showGroups ? 'groupId' : null"
     >
       <thead class="simple">
@@ -24,6 +26,8 @@
             v-for="header in homeOwnersTableHeaders"
             :key="header.value"
             :class="header.class"
+            :aria-label="header.text || header.value"
+            :aria-hidden="header.value === 'actions'"
           >
             {{ header.text }}
           </th>
@@ -165,6 +169,8 @@
                     >
                       <v-icon
                         class="mr-2"
+                        aria-hidden="false"
+                        aria-label="Owner Individual"
                         :class="{ 'person-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_IND }"
                       >
                         {{ getHomeOwnerIcon(item.partyType) }}
@@ -181,6 +187,8 @@
                     >
                       <v-icon
                         class="mr-2"
+                        aria-hidden="false"
+                        aria-label="Owner Business"
                         :class="{ 'business-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_BUS }"
                       >
                         {{ getHomeOwnerIcon(item.partyType, true) }}

ppr-ui/src/resources/tableHeaders.ts

@@ -897,7 +897,6 @@ export const homeOwnersTableHeaders: Array<BaseHeaderIF> = [
   {
     class: 'actions column-md',
     sortable: false,
-    text: '',
     value: 'actions'
   }
 ]

ppr-ui/src/views/newMhrRegistration/HomeOwners.vue

@@ -14,6 +14,8 @@
     <section
       id="mhr-owners"
       :class="{'mt-10': !isReadonlyTable && !isMhrTransfer}"
+      role="region"
+      aria-labelledby="mhr-home-owners-list"
     >
       <template v-if="!isMhrTransfer">
         <h2>1. Owners</h2>

ppr-ui/tests/unit/MhrRegistration.spec.ts

@@ -19,6 +19,8 @@ import HomeLocation from '@/views/newMhrRegistration/HomeLocation.vue'
 import HomeOwners from '@/views/newMhrRegistration/HomeOwners.vue'
 import { MhrRegistrationHomeOwnerGroupIF } from '@/interfaces'
 import { PreviousHomeOwners } from '@/components/mhrRegistration'
+import { expect, it } from 'vitest'
+import { axe } from 'vitest-axe'
 
 const store = useStore()
 

ppr-ui/tests/unit/MhrRegistrationHomeOwners.spec.ts

@@ -18,6 +18,8 @@ import { MhrCorrectionStaff, MixedRolesErrors } from '@/resources'
 import { useStore } from '../../src/store/store'
 import { useNewMhrRegistration } from '@/composables/mhrRegistration'
 import { defaultFlagSet } from '@/utils'
+import { expect, it } from 'vitest'
+import { axe } from 'vitest-axe'
 
 const store = useStore()
 
@@ -73,6 +75,13 @@ describe('Home Owners', () => {
 
   // Tests
 
+  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 Home Owners and its sub components', () => {
     expect(wrapper.exists()).toBeTruthy()
     expect(wrapper.findComponent(AddEditHomeOwner).exists()).toBeFalsy() // Hidden by default