From 3fbc4b8cff88e5dfbb38b46634f5282966181dff Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Tue, 14 May 2024 08:09:53 -0700
Subject: [PATCH] Replace table role with treegird for screenreader

---
 frontend/src/assets/main.scss                  |  6 ++++++
 frontend/src/components/bucket/BucketList.vue  | 11 ++++++++---
 frontend/src/components/bucket/BucketTable.vue | 18 ++++++++++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index b3ea633d..81a43346 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -228,6 +228,12 @@ a button:focus-visible {
     }
   }
 
+  table tbody,
+  table tbody tr td:focus-visible{
+    outline: 0 none;
+    box-shadow: inset 0px 0px 0 0.2rem #a6d5fa;
+  }
+
   .p-column-title {
     font-weight: bold;
   }
diff --git a/frontend/src/components/bucket/BucketList.vue b/frontend/src/components/bucket/BucketList.vue
index 174ef4f2..8d2fe790 100644
--- a/frontend/src/components/bucket/BucketList.vue
+++ b/frontend/src/components/bucket/BucketList.vue
@@ -56,7 +56,12 @@ onMounted(async () => {
   <div class="flex flex-wrap">
     <div class="flex-grow-1">
       <h1 class="">My files</h1>
-      <h4 class="mb-4">Select a folder to view the files inside it.</h4>
+      <h4
+        id="tree_label"
+        class="mb-4"
+      >
+        Select a folder to view the files inside it.
+      </h4>
     </div>
 
     <div class="flex-none align-items-right">
@@ -99,8 +104,8 @@ onMounted(async () => {
           >
             NRIDS Optimization
           </a>
-          (Natural Resource ministries) or your ministry's service desk if you
-          need help with &quot;bucket&quot; storage location sources.
+          (Natural Resource ministries) or your ministry's service desk if you need help with &quot;bucket&quot; storage
+          location sources.
         </Message>
 
         <Message severity="warn">
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 8f8e22cc..354019f3 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -27,6 +27,17 @@ const permissionsVisible: Ref<boolean> = ref(false);
 const permissionsBucketId: Ref<string> = ref('');
 const permissionBucketName: Ref<string> = ref('');
 const treeData: Ref<Array<BucketTreeNode>> = ref([]);
+const tableProps = {
+  role: 'treegrid',
+  'aria-describedby': 'tree_label',
+  'aria-readonly': true
+};
+const columnProps = {
+  bodyCell: () => ({
+    role: 'treeitem',
+    tabindex: 0
+  })
+};
 
 const emit = defineEmits(['show-bucket-config', 'show-sidebar-info']);
 
@@ -242,6 +253,12 @@ watch(getBuckets, () => {
     :rows-per-page-options="[10, 20, 50]"
     sort-field="bucketName"
     :sort-order="1"
+    :table-props="tableProps"
+    :pt="{
+      tbody: () => ({
+        tabindex: 0
+      })
+    }"
   >
     <template #empty>
       <div
@@ -260,6 +277,7 @@ watch(getBuckets, () => {
       header-style="padding-left: 50px"
       body-class="truncate"
       expander
+      :pt="columnProps"
     >
       <template #body="{ node }">
         <span class="row-head mr-2">