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 () => {

My files

-

Select a folder to view the files inside it.

+

+ Select a folder to view the files inside it. +

@@ -99,8 +104,8 @@ onMounted(async () => { > NRIDS Optimization - (Natural Resource ministries) or your ministry's service desk if you - need help with "bucket" storage location sources. + (Natural Resource ministries) or your ministry's service desk if you need help with "bucket" storage + location sources. 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 = ref(false); const permissionsBucketId: Ref = ref(''); const permissionBucketName: Ref = ref(''); const treeData: Ref> = 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 + }) + }" >