From 372f510193f0ea4fbc552d5811d5c03a0a8abc70 Mon Sep 17 00:00:00 2001
From: CameronEYDS <53542131+cameron-eyds@users.noreply.github.com>
Date: Thu, 19 Sep 2024 06:18:05 -0700
Subject: [PATCH] Table A11Y Updates (#2025)

---
 ppr-ui/package-lock.json                      |  4 ++--
 ppr-ui/package.json                           |  2 +-
 .../vehicleCollateral/VehicleCollateral.vue   |  1 +
 ppr-ui/src/components/common/AccountInfo.vue  | 10 ++++++++--
 .../components/common/CertifyInformation.vue  |  1 +
 .../HomeOwners/HomeOwnersTable.vue            |  6 ------
 .../src/components/parties/debtor/Debtors.vue | 13 ++++++++++--
 .../parties/party/RegisteringParty.vue        | 20 +++++++++++++++----
 .../parties/party/SecuredParties.vue          | 15 +++++++++-----
 .../parties/summaries/BasePartySummary.vue    | 11 ++++++++--
 .../tables/mhr/HomeSectionsTable.vue          |  2 ++
 .../components/tables/ppr/SearchedResults.vue |  5 ++++-
 .../unitNotes/UnitNoteContentInfo.vue         | 14 ++++++++++---
 13 files changed, 76 insertions(+), 28 deletions(-)

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index fde8f1d82..8dd881d33 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.56",
+  "version": "3.2.57",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.56",
+      "version": "3.2.57",
       "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 2339f8a33..58c6f3155 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.56",
+  "version": "3.2.57",
   "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 9c51da1bd..0a16526dc 100644
--- a/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
+++ b/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
@@ -2,6 +2,7 @@
   <v-container
     v-if="isSummary"
     class="pb-0 px-0"
+    role="region"
   >
     <v-row
       v-if="vehicleCollateral && vehicleCollateral.length > 0"
diff --git a/ppr-ui/src/components/common/AccountInfo.vue b/ppr-ui/src/components/common/AccountInfo.vue
index 9322f33bf..37b943a72 100644
--- a/ppr-ui/src/components/common/AccountInfo.vue
+++ b/ppr-ui/src/components/common/AccountInfo.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="account-info">
+  <div
+    id="account-info"
+    role="region"
+  >
     <h2 class="header mb-5">
       {{ title }}
       <v-tooltip
@@ -52,7 +55,10 @@
           </thead>
           <tbody>
             <tr class="table-info">
-              <td class="account-name pl-8 py-6">
+              <td
+                class="account-name pl-8 py-6"
+                :aria-label="accountInfo.isBusinessAccount ? 'Business' : 'Person' + accountInfo.name"
+              >
                 <v-icon class="mt-n2">
                   {{ accountInfo.isBusinessAccount ? 'mdi-domain' : 'mdi-account' }}
                 </v-icon>
diff --git a/ppr-ui/src/components/common/CertifyInformation.vue b/ppr-ui/src/components/common/CertifyInformation.vue
index 8f8d63efb..b3824b982 100644
--- a/ppr-ui/src/components/common/CertifyInformation.vue
+++ b/ppr-ui/src/components/common/CertifyInformation.vue
@@ -2,6 +2,7 @@
   <v-container
     id="certify-summary"
     class="px-0"
+    role="region"
   >
     <h2>
       {{ `${sectionNumber ? sectionNumber + '.' : ''} Authorization` }}
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
index dde8861f4..3f5d0984a 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -1413,12 +1413,6 @@ export default defineComponent({
     td:first-child {
       padding-left: 0 !important;
     }
-
-    .owner-info {
-      align-items: baseline;
-      min-width: 50rem;
-      display: flex;
-    }
   }
 
   tbody > tr.v-row-group__header {
diff --git a/ppr-ui/src/components/parties/debtor/Debtors.vue b/ppr-ui/src/components/parties/debtor/Debtors.vue
index a0521fe92..f56deb54b 100644
--- a/ppr-ui/src/components/parties/debtor/Debtors.vue
+++ b/ppr-ui/src/components/parties/debtor/Debtors.vue
@@ -3,6 +3,7 @@
     id="debtors-component"
     fluid
     class="pa-0 noGutters"
+    role="region"
   >
     <v-row noGutters>
       <v-col cols="auto">
@@ -82,6 +83,7 @@
                   v-for="header in headers"
                   :key="header.value"
                   :class="header.class"
+                  :aria-hidden="!header.text"
                 >
                   {{ header.text }}
                 </th>
@@ -122,9 +124,13 @@
                     class="list-item__title title-text generic-label"
                     style="padding-left:30px"
                   >
-                    <v-row noGutters>
+                    <v-row
+                      noGutters
+                      :aria-label="`${isBusiness(item) ? 'Business' : 'Person'} ${getName(item)}`"
+                    >
                       <v-col
                         cols="auto"
+                        aria-hidden="true"
                         :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
                       >
                         <div class="icon-div mt-n1 pr-2">
@@ -136,7 +142,10 @@
                           </v-icon>
                         </div>
                       </v-col>
-                      <v-col cols="9">
+                      <v-col
+                        cols="9"
+                        aria-hidden="true"
+                      >
                         <span :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}">
                           {{ getName(item) }}
                         </span>
diff --git a/ppr-ui/src/components/parties/party/RegisteringParty.vue b/ppr-ui/src/components/parties/party/RegisteringParty.vue
index 103639191..6a2774c08 100644
--- a/ppr-ui/src/components/parties/party/RegisteringParty.vue
+++ b/ppr-ui/src/components/parties/party/RegisteringParty.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-container class="pa-0 flat">
+  <v-container
+    class="pa-0 flat"
+    role="region"
+  >
     <v-container class="pa-0">
       <v-row
         noGutters
@@ -31,8 +34,14 @@
                   <td
                     class="generic-label"
                   >
-                    <v-row noGutters>
-                      <v-col cols="auto">
+                    <v-row
+                      noGutters
+                      :aria-label="`${isBusiness(item) ? 'Business' : 'Person'} ${getName(item)}`"
+                    >
+                      <v-col
+                        cols="auto"
+                        aria-hidden="true"
+                      >
                         <div class="icon-div mt-n1 pr-2">
                           <v-icon v-if="isBusiness(item)">
                             mdi-domain
@@ -42,7 +51,10 @@
                           </v-icon>
                         </div>
                       </v-col>
-                      <v-col cols="9">
+                      <v-col
+                        cols="9"
+                        aria-hidden="true"
+                      >
                         <div>
                           {{ getName(item) }}
                         </div>
diff --git a/ppr-ui/src/components/parties/party/SecuredParties.vue b/ppr-ui/src/components/parties/party/SecuredParties.vue
index bfd4529c1..8637b66ef 100644
--- a/ppr-ui/src/components/parties/party/SecuredParties.vue
+++ b/ppr-ui/src/components/parties/party/SecuredParties.vue
@@ -3,6 +3,7 @@
     id="secured-parties-component"
     fluid
     class="pa-0 noGutters"
+    role="region"
   >
     <ChangeSecuredPartyDialog
       attach="#app"
@@ -187,10 +188,11 @@
                 </template>
                 <!-- Table Cells -->
                 <template v-else>
-                  <td
-                    class="list-item__title"
-                  >
-                    <v-row noGutters>
+                  <td class="list-item__title">
+                    <v-row
+                      noGutters
+                      :aria-label="`${isBusiness(item) ? 'Business' : 'Person'} ${getName(item)}`"
+                    >
                       <v-col
                         cols="auto"
                         :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
@@ -204,7 +206,10 @@
                           </v-icon>
                         </div>
                       </v-col>
-                      <v-col cols="9">
+                      <v-col
+                        cols="9"
+                        aria-hidden="true"
+                      >
                         <div :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}">
                           <span class="font-weight-bold">{{ getName(item) }}</span>
                         </div>
diff --git a/ppr-ui/src/components/parties/summaries/BasePartySummary.vue b/ppr-ui/src/components/parties/summaries/BasePartySummary.vue
index e00856814..6e6afd9ad 100644
--- a/ppr-ui/src/components/parties/summaries/BasePartySummary.vue
+++ b/ppr-ui/src/components/parties/summaries/BasePartySummary.vue
@@ -2,6 +2,7 @@
   <v-card
     class="pa-0 mx-0"
     flat
+    role="region"
   >
     <v-row
       v-if="options.header"
@@ -52,7 +53,10 @@
                 <td
                   class="list-item__title"
                 >
-                  <v-row noGutters>
+                  <v-row
+                    noGutters
+                    :aria-label="`${isBusiness(item) ? 'Business' : 'Person'} ${getName(item)}`"
+                  >
                     <v-col cols="auto">
                       <div class="icon-div mt-n1 pr-2">
                         <v-icon v-if="isBusiness(item)">
@@ -63,7 +67,10 @@
                         </v-icon>
                       </div>
                     </v-col>
-                    <v-col cols="9">
+                    <v-col
+                      cols="9"
+                      aria-hidden="true"
+                    >
                       <div :class="{ 'disabled-text': item?.action === ActionTypes.REMOVED}">
                         <span class="font-weight-bold">{{ getName(item) }}</span>
                       </div>
diff --git a/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue b/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue
index 0a43f239b..8f4918b61 100644
--- a/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue
+++ b/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue
@@ -3,6 +3,7 @@
     flat
     rounded
     class="mt-2"
+    role="region"
   >
     <v-table
       id="mh-home-sections-table"
@@ -18,6 +19,7 @@
               v-for="header in headers"
               :key="header.value"
               :class="[header.class, (isReviewMode && header == headers[0]) ? 'pl-0' : '']"
+              :aria-hidden="!header.text"
             >
               {{ header.text }}
             </th>
diff --git a/ppr-ui/src/components/tables/ppr/SearchedResults.vue b/ppr-ui/src/components/tables/ppr/SearchedResults.vue
index ea96d19c0..b9c648504 100644
--- a/ppr-ui/src/components/tables/ppr/SearchedResults.vue
+++ b/ppr-ui/src/components/tables/ppr/SearchedResults.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-container class="pa-0 bg-white pb-0">
+  <v-container
+    class="pa-0 bg-white pb-0"
+    role="region"
+  >
     <!-- Results Header -->
     <v-row
       v-if="searched"
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue b/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue
index bea83fe01..da720b2fb 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue
@@ -188,13 +188,21 @@
             <!-- Table Body -->
             <tbody>
               <tr>
-                <td class="pl-0">
-                  <div class="mr-2">
+                <td class="pl-0 dp__flex_display">
+                  <div
+                    class="mr-2"
+                    :aria-label="
+                      `${note.businessName ? 'Business' : 'Person'}  ${getNoticePartyName(note.givingNoticeParty)}`
+                    "
+                  >
                     <v-icon class="notice-party-icon colour-dk-text mt-n2">
                       {{ getNoticePartyIcon(note.givingNoticeParty) }}
                     </v-icon>
                   </div>
-                  <span class="notice-party-name generic-label fs-14">
+                  <span
+                    class="notice-party-name generic-label fs-14"
+                    aria-hidden="true"
+                  >
                     {{ getNoticePartyName(note.givingNoticeParty) }}
                   </span>
                 </td>