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
+ })
+ }"
>
{
header-style="padding-left: 50px"
body-class="truncate"
expander
+ :pt="columnProps"
>