data binding for sync button to provide hover and aria label

bcgov · Oct 31, 2023 · 5a8fd4b · 5a8fd4b
1 parent 21e23eb
commit 5a8fd4b
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 8 deletions.
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
@@ -184,5 +184,4 @@ td .wrap-block {
   position: absolute !important;
   right: 0px;
   line-height: 1.2;
-
 }
diff --git a/frontend/src/components/bucket/BucketList.vue b/frontend/src/components/bucket/BucketList.vue
@@ -60,7 +60,7 @@ onMounted(async () => {
     <div class="flex justify-content-end">
       <Button
         v-if="usePermissionStore().isUserElevatedRights()"
-        v-tooltip.bottom="'Configure Bucket'"
+        v-tooltip.bottom="'Configure bucket'"
         label="Primary"
         class="p-button-outlined mt-4"
         data-test="connect-bucket"

diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
@@ -142,7 +142,10 @@ async function deleteBucket(bucketId: string) {
           >
             <font-awesome-icon icon="fa-solid fa-users" />
           </Button>
-          <SyncButton :bucket-id="data.bucketId" />
+          <SyncButton
+            label-text="Synchronize bucket"
+            :bucket-id="data.bucketId"
+          />
           <Button
             v-if="permissionStore.isBucketActionAllowed(data.bucketId, getUserId, Permissions.READ)"
             v-tooltip.bottom="'Bucket details'"

diff --git a/frontend/src/components/common/SyncButton.vue b/frontend/src/components/common/SyncButton.vue
@@ -11,11 +11,13 @@ import type { Ref } from 'vue';
 type Props = {
   bucketId?: string;
   objectId?: string;
+  labelText?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   bucketId: '',
-  objectId: ''
+  objectId: '',
+  labelText:''
 });
 
 // State
@@ -107,9 +109,9 @@ const onClick = () => {
   </Dialog>
 
   <Button
-    v-tooltip.bottom="'Synchronize bucket'"
+    v-tooltip.bottom="{ value: labelText }"
     class="p-button-lg p-button-text"
-    aria-label="Synchronize bucket"
+    :aria-label="labelText"
     @click="onClick"
   >
     <font-awesome-icon icon="fa-solid fa-sync" />

diff --git a/frontend/src/components/object/DeleteObjectButton.vue b/frontend/src/components/object/DeleteObjectButton.vue
@@ -72,6 +72,7 @@ const confirmDelete = () => {
 
   <Button
     v-if="props.mode === ButtonMode.ICON"
+    v-tooltip.bottom="'Delete object'"
     class="p-button-lg p-button-text p-button-danger"
     :disabled="props.disabled"
     aria-label="Delete object"
@@ -81,6 +82,7 @@ const confirmDelete = () => {
   </Button>
   <Button
     v-else
+    v-tooltip.bottom="'Delete object'"
     class="p-button-outlined p-button-danger"
     :disabled="props.disabled"
     aria-label="Delete object"

diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
@@ -165,7 +165,9 @@ watch([props, getObjects], async () => {
           />
           <Button
             v-if="permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.MANAGE, bucketId)"
+            v-tooltip.bottom="'Bucket permissions'"
             class="p-button-lg p-button-text"
+            aria-label="Bucket permissions"
             @click="showPermissions(props.objectId)"
           >
             <font-awesome-icon icon="fa-solid fa-users" />

diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
@@ -242,14 +242,18 @@ const filters = ref({
           >
             <font-awesome-icon icon="fa-solid fa-users" />
           </Button>
-          <SyncButton :object-id="data.id" />
+          <SyncButton
+            label-text="Synchronize file"
+            :object-id="data.id"
+          />
           <Button
             v-if="
               data.public ||
               permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.READ, props.bucketId as string)
             "
+            v-tooltip.bottom="'Bucket detail'"
             class="p-button-lg p-button-rounded p-button-text"
-            aria-label="Synchronize bucket"
+            aria-label="Bucket detail"
             @click="showInfo(data.id)"
           >
             <font-awesome-icon icon="fa-solid fa-circle-info" />