Tab Navigation for configure folder

bcgov · Jun 19, 2024 · 77496c7 · 77496c7
1 parent 4eb0788
commit 77496c7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/frontend/src/components/bucket/BucketConfigForm.vue b/frontend/src/components/bucket/BucketConfigForm.vue
@@ -125,7 +125,7 @@ const onCancel = () => {
         placeholder="My Documents"
         help-text="Your custom display name for the storage location,
           shown in BCBox as a folder. Any name as you would like to see it listed in BCBox."
-        autofocus
+        focus-trap
       />
       <TextInput
         name="bucket"

diff --git a/frontend/src/components/bucket/BucketList.vue b/frontend/src/components/bucket/BucketList.vue
@@ -6,6 +6,7 @@ import { BucketConfigForm, BucketSidebar, BucketTable } from '@/components/bucke
 import { Button, Dialog, Message } from '@/lib/primevue';
 import { useAuthStore, useBucketStore, useConfigStore, usePermissionStore } from '@/store';
 import { BucketConfig } from '@/utils/constants';
+import { onDialogHide } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 import type { Bucket } from '@/types';
@@ -38,6 +39,7 @@ const showBucketConfig = (bucket?: Bucket) => {
 
 const closeBucketConfig = () => {
   displayBucketConfig.value = false;
+  onDialogHide();
 };
 
 onMounted(async () => {
@@ -78,21 +80,32 @@ onMounted(async () => {
 
       <!-- Bucket config dialog -->
       <Dialog
+        id="config_dialog"
         class="bcbox-info-dialog"
         :visible="displayBucketConfig"
         :style="{ width: '50vw' }"
         :modal="true"
+        aria-labelledby="config_dialog_label"
+        aria-describedby="config_dialog_desc"
         @update:visible="closeBucketConfig"
       >
         <template #header>
           <font-awesome-icon
             icon="fas fa-cog"
             fixed-width
           />
-          <span class="p-dialog-title">{{ BucketConfig.HEADER_NEW_BUCKET }}</span>
+          <span
+            id="config_dialog_label"
+            class="p-dialog-title"
+          >
+            {{ BucketConfig.HEADER_NEW_BUCKET }}
+          </span>
         </template>
 
-        <h3 class="bcbox-info-dialog-subhead">
+        <h3
+          id="config_dialog_label"
+          class="bcbox-info-dialog-subhead"
+        >
           {{ bucketConfigTitle }}
         </h3>
 

diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
@@ -52,6 +52,7 @@ const showSidebarInfo = async (id: number) => {
 };
 
 const showBucketConfig = async (bucket: Bucket) => {
+  focusedElement.value = document.activeElement;
   emit('show-bucket-config', bucket);
 };
 
@@ -309,7 +310,6 @@ watch(getBuckets, () => {
             class="p-button-lg p-button-text"
             aria-label="Configure folder"
             @click="showBucketConfig(node.data)"
-            @keyup.enter="showBucketConfig(node.data)"
           >
             <font-awesome-icon icon="fas fa-cog" />
           </Button>

diff --git a/frontend/src/components/common/ShareButton.vue b/frontend/src/components/common/ShareButton.vue
@@ -7,7 +7,8 @@ import { Invite, Share } from '@/components/common';
 import { Button, Dialog, TabView, TabPanel } from '@/lib/primevue';
 
 import { Permissions } from '@/utils/constants';
-import { useAuthStore, useObjectStore, usePermissionStore, useBucketStore } from '@/store';
+import { useAuthStore, useObjectStore, usePermissionStore, useBucketStore, useNavStore } from '@/store';
+import { onDialogHide } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 
@@ -32,6 +33,7 @@ const objectStore = useObjectStore();
 const bucketStore = useBucketStore();
 const { getUserId } = storeToRefs(useAuthStore());
 const permissionStore = usePermissionStore();
+const { focusedElement } = storeToRefs(useNavStore());
 
 // State
 const resourceType = props.objectId ? ref('object') : ref('bucket');
@@ -54,6 +56,13 @@ const hasManagePermission: Ref<boolean> = computed(() => {
 
 // Dialog
 const displayShareDialog = ref(false);
+
+const showDialog = (x: boolean) => {
+  displayShareDialog.value = x;
+  if (displayShareDialog.value) {
+    focusedElement.value = document.activeElement;
+  }
+};
 </script>
 
 <template>
@@ -67,6 +76,7 @@ const displayShareDialog = ref(false);
     aria-labelledby="share_dialog_label"
     aria-describedby="share_dialog_desc"
     focus-trap
+    @after-hide="onDialogHide"
   >
     <template #header>
       <font-awesome-icon
@@ -139,8 +149,7 @@ const displayShareDialog = ref(false);
     v-tooltip.bottom="`Share ${props.labelText.toLocaleLowerCase()}`"
     class="p-button-lg p-button-text primary"
     :aria-label="`Share ${props.labelText.toLocaleLowerCase()}`"
-    @click="displayShareDialog = true"
-    @keyup.enter="displayShareDialog = true"
+    @click="showDialog(true)"
   >
     <font-awesome-icon icon="fa-solid fa-share-alt" />
   </Button>