Add Tab Navigation to sidebar

bcgov · Jun 21, 2024 · 53b9700 · 53b9700
1 parent f27cb89
commit 53b9700
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/components/bucket/BucketSidebar.vue b/frontend/src/components/bucket/BucketSidebar.vue
@@ -1,6 +1,7 @@
+<!-- eslint-disable vue/valid-v-slot -->
 <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 +10,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 +33,7 @@ const managedBy: Ref<string | undefined> = ref();
 
 // Actions
 const closeSidebarInfo = async () => {
+  onDialogHide();
   emit('close-sidebar-info');
 };
 
@@ -60,17 +63,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"
       >

diff --git a/frontend/src/components/bucket/BucketTable.vue b/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>