Merge pull request #221 from bcgov/SC3690

Add Tab Navigation to upload button
bcgov · Jul 9, 2024 · 4942fd5 · 4942fd5
2 parents 0336a74 + c51fcf3
commit 4942fd5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/components/object/ObjectList.vue b/frontend/src/components/object/ObjectList.vue
@@ -10,9 +10,10 @@ import {
   ObjectUpload
 } from '@/components/object';
 import { Button } from '@/lib/primevue';
-import { useAuthStore, useObjectStore, usePermissionStore } from '@/store';
+import { useAuthStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
+import { onDialogHide } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
 //const navStore = useNavStore();
 const objectStore = useObjectStore();
 const permissionStore = usePermissionStore();
+const { focusedElement } = storeToRefs(useNavStore());
 
 const { getSelectedObjects } = storeToRefs(objectStore);
 const { getUserId } = storeToRefs(useAuthStore());
@@ -51,9 +53,11 @@ const closeObjectInfo = () => {
 
 const showUpload = () => {
   displayUpload.value = true;
+  focusedElement.value = document.activeElement;
 };
 
 const closeUpload = () => {
+  onDialogHide();
   displayUpload.value = false;
   objectTableKey.value += 1;
 };

diff --git a/frontend/src/components/object/ObjectUpload.vue b/frontend/src/components/object/ObjectUpload.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 import ObjectUploadFile from '@/components/object/ObjectUploadFile.vue';
 import { Button, FileUpload, useToast } from '@/lib/primevue';
@@ -63,7 +63,7 @@ const onUpload = async (event: any) => {
           );
           successfulFiles.value.push(file);
         } catch (error: any) {
-          toast.error(`Failed to upload file ${file.name}`, error, {life: 0});
+          toast.error(`Failed to upload file ${file.name}`, error, { life: 0 });
           failedFiles.value.push(file);
         } finally {
           appStore.endUploading();
@@ -96,6 +96,10 @@ const onRemoveFailedFile = async (index: number) => {
 const noFilesChosen = (files?: Array<File>): boolean => !files?.length;
 
 const submitObjectMetaTagConfig = (values: Array<ObjectMetadataTagFormType>) => (formData = values);
+
+onMounted(() => {
+  document.getElementById('upload-panel')?.focus();
+});
 </script>
 
 <template>
@@ -108,7 +112,14 @@ const submitObjectMetaTagConfig = (values: Array<ObjectMetadataTagFormType>) =>
   >
     <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
       <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
-        <div class="flex gap-2">
+        <div
+          id="upload-panel"
+          tabindex="0"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="upload-panel-label"
+          class="flex gap-2"
+        >
           <Button
             :class="{ 'p-button-outlined': !noFilesChosen(files) }"
             @click="chooseCallback()"
@@ -125,12 +136,14 @@ const submitObjectMetaTagConfig = (values: Array<ObjectMetadataTagFormType>) =>
             @click="uploadCallback()"
           >
             <font-awesome-icon
+              id="upload-panel-label"
               icon="fa-solid fa-upload"
               class="mr-1"
             />
             Start upload
           </Button>
           <Button
+            aria-label="Close"
             class="p-button-outlined"
             @click="
               () => {