Update tab navigation to object Permissions

bcgov · Jun 11, 2024 · 2216b52 · 2216b52
1 parent 22b72d5
commit 2216b52
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/frontend/src/components/bucket/BucketPermission.vue b/frontend/src/components/bucket/BucketPermission.vue
@@ -195,6 +195,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" />

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

diff --git a/frontend/src/components/object/ObjectPermission.vue b/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>
@@ -117,6 +119,7 @@ onBeforeMount(() => {
       <Column
         field="fullName"
         header="Name"
+        aria-labelledby="upload_checkbox"
       />
       <Column
         field="idpName"
@@ -146,6 +149,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 +164,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 +179,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 +190,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>

diff --git a/frontend/src/components/object/ObjectPublicToggle.vue b/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() &&

diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
@@ -12,7 +12,7 @@ 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 { ButtonMode } from '@/utils/enums';
 import { formatDateLong } from '@/utils/formatters';
@@ -50,6 +50,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 +84,7 @@ async function showPermissions(objectId: string) {
   permissionsVisible.value = true;
   permissionsObjectId.value = objectId;
   permissionsObjectName.value = objectStore.getObject(objectId)?.name;
+  focusedElement.value = document.activeElement;
 }
 
 onMounted(() => {
@@ -176,6 +178,12 @@ const selectedFilters = (payload: any) => {
   lazyParams.value.filters = filters;
   loadLazyData();
 };
+
+const onDialogHide = () => {
+  focusedElement.value?.focus();
+  focusedElement.value = null;
+  permissionsVisible.value = false;
+};
 </script>
 
 <template>
@@ -339,6 +347,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 +385,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>