A11Y-Table-UXA-Items (#2023)

* A11Y-UXA-Items * Revert some unitended changes * Include import * unit test revert * ReAdd role
bcgov · Sep 16, 2024 · 268922d · 268922d
1 parent c88fa1c
commit 268922d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 35 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.55",
+  "version": "3.2.56",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -145,7 +145,7 @@
                 </div>
               </template>
 
-              <tr
+              <div
                 v-else-if="item.ownerId"
                 :key="`owner-row-key-${homeOwners.indexOf(item)}`"
                 class="owner-info"
@@ -163,40 +163,38 @@
                   ]"
                 >
                   <div :class="{ 'removed-owner': isRemovedHomeOwner(item) }">
-                    <div
+                    <span
                       v-if="item.individualName"
                       class="owner-icon-name"
+                      aria-label="Person"
                     >
                       <v-icon
                         class="mr-2"
-                        aria-hidden="false"
-                        aria-label="Owner Individual"
                         :class="{ 'person-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_IND }"
                       >
                         {{ getHomeOwnerIcon(item.partyType) }}
                       </v-icon>
-                      <div class="font-weight-bold">
+                      <span class="font-weight-bold">
                         {{ item.individualName.first }}
                         {{ item.individualName.middle }}
                         {{ item.individualName.last }}
-                      </div>
-                    </div>
-                    <div
+                      </span>
+                    </span>
+                    <span
                       v-else
                       class="owner-icon-name"
+                      aria-label="Business"
                     >
                       <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) }}
                       </v-icon>
                       <div class="font-weight-bold">
                         {{ item.organizationName }}
                       </div>
-                    </div>
+                    </span>
 
                     <div
                       v-if="item.partyType === HomeOwnerPartyTypes.OWNER_IND ||
@@ -516,7 +514,7 @@
                     </template>
                   </template>
                 </td>
-              </tr>
+              </div>
 
               <!-- For MHR scenarios where users can entirely remove added owners -->
               <tr v-else-if="!hideRemovedOwners && !showGroups">
@@ -1322,13 +1320,14 @@ export default defineComponent({
     }
 
     tbody > tr > td > div > tr > td,
-    tbody > tr > td {
+    tbody > tr > td,
+    .owner-info {
       padding: 20px 0;
       border-radius: 0 !important;
     }
 
     .owner-row:not(:last-child) tr > td,
-    .bottom-border {
+    .bottom-border, .owner-info {
       border-bottom: thin solid rgba(0, 0, 0, 0.12);
     }
 
@@ -1349,6 +1348,7 @@ export default defineComponent({
     .owner-info {
       width: 100%;
       display: inline-flex;
+      align-items: baseline;
 
       td {
         white-space: normal;
@@ -1415,6 +1415,7 @@ export default defineComponent({
     }
 
     .owner-info {
+      align-items: baseline;
       min-width: 50rem;
       display: flex;
     }

diff --git a/ppr-ui/src/components/tables/SearchHistory.vue b/ppr-ui/src/components/tables/SearchHistory.vue
@@ -41,22 +41,17 @@
                 :class="{ 'added-search-effect': searchAdded && index === 0 }"
               >
                 <td>
-                  <v-row noGutters>
-                    <v-col cols="2">
-                      <v-icon
-                        class="pr-2 mt-n1"
-                        color="#212529"
-                        aria-hidden="false"
-                        :aria-label="headers[0].text + ',' + (isPprSearch(item) ? 'PPR Search' : 'MHR Search')"
-                        role="img"
-                      >
-                        {{ isPprSearch(item) ? 'mdi-account-details' : 'mdi-home' }}
-                      </v-icon>
-                    </v-col>
-                    <v-col>
-                      {{ displaySearchValue(item.searchQuery) }}
-                    </v-col>
-                  </v-row>
+                  <v-icon
+                    class="pr-2 mt-n1"
+                    color="#212529"
+                    aria-hidden="false"
+                    :aria-label="
+                      headers[0].text + ',' + (isPprSearch(item) ? 'PPR' : 'MHR') + displaySearchValue(item.searchQuery)
+                    "
+                  >
+                    {{ isPprSearch(item) ? 'mdi-account-details' : 'mdi-home' }}
+                  </v-icon>
+                  <span aria-hidden="true">{{ displaySearchValue(item.searchQuery) }}</span>
                 </td>
                 <td>
                   <span

diff --git a/ppr-ui/tests/unit/MhrRegistration.spec.ts b/ppr-ui/tests/unit/MhrRegistration.spec.ts
@@ -19,8 +19,6 @@ 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()