Table A11Y Updates (#2025)

bcgov · Sep 19, 2024 · 372f510 · 372f510
1 parent 7e83fa8
commit 372f510
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 28 deletions.
diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>