Merge pull request #217 from bcgov/SC3688

Add Tab Navigation to sidebar

Author: TimCsaky

frontend/src/components/bucket/BucketSidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { onBeforeMount, ref, watch } from 'vue';
+import { onBeforeMount, onMounted, ref, watch } from 'vue';
 
 import { Button } from '@/lib/primevue';
 import { usePermissionStore, useUserStore } from '@/store';
@@ -9,6 +9,7 @@ import { formatDateLong } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 import type { Bucket, BucketPermission } from '@/types';
+import { onDialogHide } from '@/utils/utils';
 
 // Props
 type Props = {
@@ -31,6 +32,7 @@ const managedBy: Ref<string | undefined> = ref();
 
 // Actions
 const closeSidebarInfo = async () => {
+  onDialogHide();
   emit('close-sidebar-info');
 };
 
@@ -60,17 +62,30 @@ onBeforeMount(() => {
   load();
 });
 
+onMounted(() => {
+  document.getElementById('side-panel')?.focus();
+});
+
 watch(props, () => {
   load();
 });
 </script>
 
 <template>
-  <div class="side-panel pl-4">
+  <div
+    id="side-panel"
+    tabindex="0"
+    class="side-panel pl-4"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="side-panel_label"
+    aria-describedby="side-panel_desc"
+  >
     <div class="flex panel-header align-items-start">
       <font-awesome-icon icon="fa-solid fa-circle-info" />
       <h1 class="mt-0 ml-3 flex-grow-1">Folder details</h1>
       <Button
+        aria-label="Close"
         class="p-button-text pt-0"
         @click="closeSidebarInfo"
       >

frontend/src/components/bucket/BucketTable.vue

@@ -49,6 +49,7 @@ const endpointMap = new Map<string, Array<Bucket>>();
 
 const showSidebarInfo = async (id: number) => {
   emit('show-sidebar-info', id);
+  focusedElement.value = document.activeElement;
 };
 
 const showBucketConfig = async (bucket: Bucket) => {
@@ -334,7 +335,6 @@ watch(getBuckets, () => {
             class="p-button-lg p-button-rounded p-button-text"
             aria-label="Folder details"
             @click="showSidebarInfo(node.data.bucketId)"
-            @keyup.enter="showSidebarInfo(node.data.bucketId)"
           >
             <font-awesome-icon icon="fa-solid fa-circle-info" />
           </Button>

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>

frontend/src/components/object/ObjectSidebar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { watch } from 'vue';
+import { watch, onMounted } from 'vue';
 import { ObjectMetadata, ObjectProperties, ObjectTag } from '@/components/object';
 import { Button } from '@/lib/primevue';
 import { useAuthStore, useMetadataStore, useObjectStore, usePermissionStore, useTagStore } from '@/store';
 import { Permissions, RouteNames } from '@/utils/constants';
+import { onDialogHide } from '@/utils/utils';
 
 // Props
 type Props = {
@@ -25,11 +26,16 @@ const { getUserId } = storeToRefs(useAuthStore());
 
 // Actions
 const closeObjectInfo = async () => {
+  onDialogHide();
   emit('close-object-info');
 };
 
 const obj = objectStore.getObject(props.objectId);
 
+onMounted(() => {
+  document.getElementById('side-panel')?.focus();
+});
+
 watch(
   props,
   () => {
@@ -46,11 +52,24 @@ watch(
 </script>
 
 <template>
-  <div class="side-panel pl-4 pt-2">
+  <div
+    id="side-panel"
+    tabindex="0"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="side-panel_label"
+    class="side-panel pl-4 pt-2"
+  >
     <div class="flex panel-header align-items-start">
       <font-awesome-icon icon="fa-solid fa-circle-info" />
-      <h1 class="mt-0 flex-grow-1">File details</h1>
+      <h1
+        id="side-panel_label"
+        class="mt-0 flex-grow-1"
+      >
+        File details
+      </h1>
       <Button
+        aria-label="Close"
         class="p-button-rounded p-button-text pt-0 mt-0"
         @click="closeObjectInfo"
       >
@@ -77,6 +96,7 @@ watch(
         :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: props.objectId } }"
       >
         <Button
+          aria-label="View all details"
           label="Primary"
           class="p-button-outlined"
           @click="navigate"

frontend/src/components/object/ObjectTable.vue

@@ -77,7 +77,10 @@ const onDeletedSuccess = () => {
   loadLazyData();
 };
 
-const showInfo = (id: string) => emit('show-object-info', id);
+const showInfo = (id: string) => {
+  emit('show-object-info', id);
+  focusedElement.value = document.activeElement;
+};
 
 async function showPermissions(objectId: string) {
   await permissionStore.fetchObjectPermissions({ objectId });