Update tab navigation to object Permissions

frontend/src/assets/main.scss

@@ -86,6 +86,7 @@ a:focus-visible {
 a button:focus-visible {
   box-shadow: none;
 }
+
 div:focus-visible {
   outline: 0 none;
   box-shadow: inset 0px 0px 0 0.2rem #a6d5fa;

frontend/src/components/bucket/BucketPermission.vue

@@ -8,6 +8,7 @@ import { useAlert } from '@/composables/useAlert';
 import { Button, Checkbox, Column, DataTable } from '@/lib/primevue';
 import { usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
+
 import type { Ref } from 'vue';
 import type { UserPermissions } from '@/types';
 
@@ -195,6 +196,7 @@ onBeforeMount(async () => {
           <Button
             class="p-button-lg p-button-text"
             severity="danger"
+            aria-label="remove"
             @click="removeBucketUser(data.userId)"
           >
             <font-awesome-icon icon="fa-solid fa-user-xmark" />

frontend/src/components/bucket/BucketTable.vue

@@ -8,7 +8,7 @@ import { SyncButton, ShareButton } from '@/components/common';
 import { Button, Column, Dialog, TreeTable, useConfirm } from '@/lib/primevue';
 import { useAppStore, useAuthStore, useBucketStore, useNavStore, usePermissionStore } from '@/store';
 import { DELIMITER, Permissions } from '@/utils/constants';
-import { getBucketPath, joinPath } from '@/utils/utils';
+import { getBucketPath, joinPath, onDialogHide } from '@/utils/utils';
 
 import type { TreeTableExpandedKeys } from 'primevue/treetable';
 import type { Ref } from 'vue';
@@ -239,11 +239,6 @@ watch(getBuckets, () => {
   bucketTreeNodeMap.forEach((_v, k) => (expandedKeys.value[k] = true));
   treeData.value = tree;
 });
-const onDialogHide = () => {
-  focusedElement.value?.focus();
-  focusedElement.value = null;
-  permissionsVisible.value = false;
-};
 </script>
 
 <template>
@@ -358,6 +353,7 @@ const onDialogHide = () => {
       </template>
     </Column>
   </TreeTable>
+
   <!-- eslint-disable vue/no-v-model-argument -->
   <Dialog
     id="permissions_dialog"
@@ -368,7 +364,6 @@ const onDialogHide = () => {
     aria-labelledby="permissions_label"
     aria-describedby="permissions_desc"
     @after-hide="onDialogHide"
-    focus-trap
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>

frontend/src/components/object/ObjectPermission.vue

@@ -78,6 +78,7 @@ onBeforeMount(() => {
       <Button
         class="mt-1 mb-4"
         @click="showSearchUsers = true"
+        @keyup.enter="showSearchUsers = true"
       >
         <font-awesome-icon
           icon="fa-solid fa-user-plus"
@@ -104,6 +105,7 @@ onBeforeMount(() => {
       current-page-report-template="{first}-{last} of {totalRecords}"
       :rows-per-page-options="[10, 20, 50]"
       sort-field="fullName"
+      aria-label="File Permissions"
       :sort-order="1"
     >
       <template #empty>
@@ -146,6 +148,7 @@ onBeforeMount(() => {
           <Checkbox
             v-model="data.update"
             input-id="update"
+            aria-label="update"
             :binary="true"
             @update:model-value="(value: boolean) => updateObjectPermission(value, data.userId, Permissions.UPDATE)"
           />
@@ -160,6 +163,7 @@ onBeforeMount(() => {
           <Checkbox
             v-model="data.delete"
             input-id="delete"
+            aria-label="delete"
             :binary="true"
             @update:model-value="(value: boolean) => updateObjectPermission(value, data.userId, Permissions.DELETE)"
           />
@@ -174,6 +178,7 @@ onBeforeMount(() => {
           <Checkbox
             v-model="data.manage"
             input-id="manage"
+            aria-label="manage"
             :binary="true"
             @update:model-value="(value: boolean) => updateObjectPermission(value, data.userId, Permissions.MANAGE)"
           />
@@ -184,7 +189,9 @@ onBeforeMount(() => {
           <Button
             class="p-button-lg p-button-text"
             severity="danger"
+            aria-label="remove"
             @click="removeObjectUser(data.userId)"
+            @keyup.enter="removeObjectUser(data.userId)"
           >
             <font-awesome-icon icon="fa-solid fa-user-xmark" />
           </Button>

frontend/src/components/object/ObjectPublicToggle.vue

@@ -66,6 +66,7 @@ watch(props, () => {
 <template>
   <InputSwitch
     v-model="isPublic"
+    aria-label="Toggle to make public"
     :disabled="
       !(
         usePermissionStore().isUserElevatedRights() &&

frontend/src/components/object/ObjectTable.vue

@@ -12,8 +12,9 @@ import {
 } from '@/components/object';
 import { SyncButton, ShareButton } from '@/components/common';
 import { Button, Column, DataTable, Dialog, InputText, useToast } from '@/lib/primevue';
-import { useAuthStore, useObjectStore, usePermissionStore } from '@/store';
+import { useAuthStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
 import { Permissions, RouteNames } from '@/utils/constants';
+import { onDialogHide } from '@/utils/utils';
 import { ButtonMode } from '@/utils/enums';
 import { formatDateLong } from '@/utils/formatters';
 import { objectService } from '@/services';
@@ -50,6 +51,7 @@ const emit = defineEmits(['show-object-info']);
 const objectStore = useObjectStore();
 const permissionStore = usePermissionStore();
 const { getUserId } = storeToRefs(useAuthStore());
+const { focusedElement } = storeToRefs(useNavStore());
 
 // State
 const permissionsVisible = ref(false);
@@ -83,6 +85,7 @@ async function showPermissions(objectId: string) {
   permissionsVisible.value = true;
   permissionsObjectId.value = objectId;
   permissionsObjectName.value = objectStore.getObject(objectId)?.name;
+  focusedElement.value = document.activeElement;
 }
 
 onMounted(() => {
@@ -339,6 +342,7 @@ const selectedFilters = (payload: any) => {
             v-if="
               permissionStore.isObjectActionAllowed(data.id, getUserId, Permissions.MANAGE, props.bucketId as string)
             "
+            id="file_permissions"
             v-tooltip.bottom="'File permissions'"
             class="p-button-lg p-button-text"
             aria-label="File permissions"
@@ -376,21 +380,33 @@ const selectedFilters = (payload: any) => {
 
     <!-- eslint-disable vue/no-v-model-argument -->
     <Dialog
+      id="permissions_dialog"
       v-model:visible="permissionsVisible"
       :draggable="false"
       :modal="true"
       class="bcbox-info-dialog"
+      aria-labelledby="permissions_label"
+      aria-describedby="permissions_desc"
+      @after-hide="onDialogHide"
     >
       <!-- eslint-enable vue/no-v-model-argument -->
       <template #header>
         <font-awesome-icon
           icon="fas fa-users"
           fixed-width
         />
-        <span class="p-dialog-title">File Permissions</span>
+        <span
+          id="permissions_label"
+          class="p-dialog-title"
+        >
+          File Permissions
+        </span>
       </template>
 
-      <h3 class="bcbox-info-dialog-subhead">
+      <h3
+        id="permissions_desc"
+        class="bcbox-info-dialog-subhead"
+      >
         {{ permissionsObjectName }}
       </h3>
 

frontend/src/utils/utils.ts

@@ -1,7 +1,10 @@
+import { storeToRefs } from 'pinia';
+
 import { DELIMITER } from '@/utils/constants';
 import ConfigService from '@/services/configService';
 import { ExcludeTypes } from '@/utils/enums';
 import type { Bucket } from '@/types';
+import { useNavStore } from '@/store';
 
 /**
  * @function differential
@@ -126,9 +129,7 @@ export function setDispositionHeader(filename: string) {
  * @returns {string} full canonical url or path to bucket
  */
 export function getBucketPath(bucket: Bucket, justPath = false): string {
-  return justPath ?
-    `${bucket.bucket}/${bucket.key}` :
-    `${bucket.endpoint}/${bucket.bucket}/${bucket.key}`;
+  return justPath ? `${bucket.bucket}/${bucket.key}` : `${bucket.endpoint}/${bucket.bucket}/${bucket.key}`;
 }
 
 /**
@@ -141,3 +142,14 @@ export function getLastSegment(path: string) {
   const p = path.replace(/\/+$/, '');
   return p.slice(p.lastIndexOf('/') + 1);
 }
+
+/**
+ * @function onDialogHide
+ * Return focus to the button which trigger model visibility
+ * @type {focusedElement} stores dom element which needs to be focused
+ */
+export function onDialogHide() {
+  const { focusedElement } = storeToRefs(useNavStore());
+  focusedElement.value?.focus();
+  focusedElement.value = null;
+}