Replace table role with treegird for screenreader

bcgov · May 14, 2024 · 134ca36 · 134ca36
1 parent 0d51350
commit 134ca36
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git 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.1rem #a6d5fa;
+  }
+
   .p-column-title {
     font-weight: bold;
   }

diff --git 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
@@ -27,6 +27,20 @@ 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: () => ({
+    style: {
+      color: 'red'
+    },
+    role: 'treeitem',
+    tabindex: 0
+  })
+};
 
 const emit = defineEmits(['show-bucket-config', 'show-sidebar-info']);
 
@@ -242,6 +256,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 +280,7 @@ watch(getBuckets, () => {
       header-style="padding-left: 50px"
       body-class="truncate"
       expander
+      :pt="columnProps"
     >
       <template #body="{ node }">
         <span class="row-head mr-2">