Add Tab Navigation to Sync Button

frontend/src/components/bucket/BucketSidebar.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/valid-v-slot -->
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { onBeforeMount, onMounted, ref, watch } from 'vue';

frontend/src/components/common/SyncButton.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Button, Dialog, useToast } from '@/lib/primevue';
-import { useObjectStore, useBucketStore } from '@/store';
+import { useObjectStore, useBucketStore, useNavStore } from '@/store';
 import { formatDateLong } from '@/utils/formatters';
+import { onDialogHide } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 
@@ -30,6 +32,7 @@ const lastSyncRequestedDate: Ref<String> = ref('');
 const objectStore = useObjectStore();
 const bucketStore = useBucketStore();
 const toast = useToast();
+const { focusedElement } = storeToRefs(useNavStore());
 
 // Dialog
 const displaySyncDialog = ref(false);
@@ -48,6 +51,7 @@ const onSubmit = () => {
 };
 
 const onClick = () => {
+  focusedElement.value = document.activeElement;
   displaySyncDialog.value = true;
   if (props.bucketId) {
     const bucket = bucketStore.getBucket(props.bucketId);
@@ -63,11 +67,15 @@ const onClick = () => {
 
 <template>
   <Dialog
+    id="sync_dialog"
     v-model:visible="displaySyncDialog"
     header="Synchronize"
     :modal="true"
     :style="{ minWidth: '50vw' }"
     class="bcbox-info-dialog"
+    aria-labelledby="sync_dialog_label"
+    aria-describedby="sync_dialog_desc"
+    @after-hide="onDialogHide"
   >
     <template #header>
       <font-awesome-icon
@@ -76,6 +84,7 @@ const onClick = () => {
       />
       <span
         v-if="props.bucketId"
+        id="sync_dialog_label"
         class="p-dialog-title"
       >
         Synchronize storage location
@@ -88,7 +97,10 @@ const onClick = () => {
       </span>
     </template>
 
-    <h3 class="bcbox-info-dialog-subhead">
+    <h3
+      id="sync_dialog_desc"
+      class="bcbox-info-dialog-subhead"
+    >
       {{ name }}
     </h3>
 
@@ -103,12 +115,10 @@ const onClick = () => {
 
     <ul class="mb-4 ml-1.5">
       <li v-if="props.bucketId">
-        This will schedule a synchronization of the folder's
-        contents with its source storage location (&quot;bucket&quot;)
-      </li>
-      <li v-else>
-        This will schedule a synchronization of the file
+        This will schedule a synchronization of the folder's contents with its source storage location
+        (&quot;bucket&quot;)
       </li>
+      <li v-else>This will schedule a synchronization of the file</li>
       <li>
         Use this if you are modifying it outside of BCBox, such as in another software application, and want to see
         those changes reflected in BCBox
@@ -135,7 +145,6 @@ const onClick = () => {
     class="p-button-lg p-button-text"
     :aria-label="labelText"
     @click="onClick"
-    @keyup.enter="onClick"
   >
     <font-awesome-icon icon="fa-solid fa-sync" />
   </Button>