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>