From 8e8858eacee016f300ddcd50088a040bb00f6914 Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Thu, 6 Jun 2024 17:34:57 -0700
Subject: [PATCH 1/4] Add tab navigation and aria labels for permissions model

---
 frontend/src/assets/main.scss                 |  2 +-
 .../components/bucket/BucketPermission.vue    |  9 ++++++-
 .../src/components/bucket/BucketTable.vue     | 24 +++++++++++++++++--
 frontend/src/components/form/SearchUsers.vue  |  8 +++----
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index f41b9182..3fa0a6e5 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -86,7 +86,7 @@ a:focus-visible {
 a button:focus-visible {
   box-shadow: none;
 }
-
+.bcbox-info-dialog:focus-visible
 div:focus-visible {
   outline: 0 none;
   box-shadow: inset 0px 0px 0 0.2rem #a6d5fa;
diff --git a/frontend/src/components/bucket/BucketPermission.vue b/frontend/src/components/bucket/BucketPermission.vue
index 38b3297d..a92bdc20 100644
--- a/frontend/src/components/bucket/BucketPermission.vue
+++ b/frontend/src/components/bucket/BucketPermission.vue
@@ -8,7 +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 FocusTrap from 'primevue/focustrap';
 import type { Ref } from 'vue';
 import type { UserPermissions } from '@/types';
 
@@ -75,6 +75,7 @@ onBeforeMount(async () => {
       <Button
         class="mt-1 mb-4"
         @click="showSearchUsers = true"
+        @keyup.enter="showSearchUsers = true"
       >
         <font-awesome-icon
           icon="fa-solid fa-user-plus"
@@ -99,6 +100,7 @@ onBeforeMount(async () => {
       :rows-per-page-options="[10, 20, 50]"
       sort-field="fullName"
       :sort-order="1"
+      aria-label="Bucket Permissions"
     >
       <template #empty>
         <div class="flex justify-content-center">
@@ -108,6 +110,7 @@ onBeforeMount(async () => {
       <Column
         field="fullName"
         header="Name"
+        aria-labelledby="upload_checkbox"
       />
       <Column
         field="idpName"
@@ -122,6 +125,7 @@ onBeforeMount(async () => {
           <Checkbox
             v-model="data.create"
             input-id="create"
+            aria-label="upload"
             :binary="true"
             @update:model-value="(value: boolean) => updateBucketPermission(value, data.userId, Permissions.CREATE)"
           />
@@ -136,6 +140,7 @@ onBeforeMount(async () => {
           <Checkbox
             v-model="data.read"
             input-id="read"
+            aria-label="Read"
             :binary="true"
             @update:model-value="(value: boolean) => updateBucketPermission(value, data.userId, Permissions.READ)"
           />
@@ -150,6 +155,7 @@ onBeforeMount(async () => {
           <Checkbox
             v-model="data.update"
             input-id="update"
+            aria-label="Update"
             :binary="true"
             @update:model-value="(value: boolean) => updateBucketPermission(value, data.userId, Permissions.UPDATE)"
           />
@@ -164,6 +170,7 @@ onBeforeMount(async () => {
           <Checkbox
             v-model="data.delete"
             input-id="delete"
+            aria-label="delete"
             :binary="true"
             @update:model-value="(value: boolean) => updateBucketPermission(value, data.userId, Permissions.DELETE)"
           />
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 87a10e9d..104ee71e 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -237,6 +237,12 @@ watch(getBuckets, () => {
   bucketTreeNodeMap.forEach((_v, k) => (expandedKeys.value[k] = true));
   treeData.value = tree;
 });
+const onDialogHide = () => {
+  console.log('jatinder');
+  debugger;
+  document.getElementById('folder_permissions').focus();
+  //debugger;
+};
 </script>
 
 <template>
@@ -313,6 +319,7 @@ watch(getBuckets, () => {
           </Button>
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
+            id="folder_permissions"
             v-tooltip.bottom="'Folder permissions'"
             class="p-button-lg p-button-text"
             aria-label="Folder permissions"
@@ -353,10 +360,15 @@ watch(getBuckets, () => {
 
   <!-- 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"
+    @hide="onDialogHide"
+    focus-trap
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>
@@ -364,10 +376,18 @@ watch(getBuckets, () => {
         icon="fas fa-users"
         fixed-width
       />
-      <span class="p-dialog-title">Folder permissions</span>
+      <span
+        id="permissions_label"
+        class="p-dialog-title"
+      >
+        Folder permissions
+      </span>
     </template>
 
-    <h3 class="bcbox-info-dialog-subhead">
+    <h3
+      id="permissions_desc"
+      class="bcbox-info-dialog-subhead"
+    >
       {{ permissionBucketName }}
     </h3>
 
diff --git a/frontend/src/components/form/SearchUsers.vue b/frontend/src/components/form/SearchUsers.vue
index 7301b94f..d8e6c578 100644
--- a/frontend/src/components/form/SearchUsers.vue
+++ b/frontend/src/components/form/SearchUsers.vue
@@ -114,8 +114,8 @@ onMounted(() => {
 
 <template>
   <div>
-    <div v-if="getConfig.idpList.length <= 3">
-      <div
+    <ul v-if="getConfig.idpList.length <= 3">
+      <li
         v-for="idp of getConfig.idpList"
         :key="idp.idp"
         class="field-radiobutton mt-1"
@@ -128,8 +128,8 @@ onMounted(() => {
           @click="onReset"
         />
         <label :for="idp.idp">{{ idp.name }}</label>
-      </div>
-    </div>
+      </li>
+    </ul>
     <div v-else>
       <Dropdown
         v-model="selectedIDP"

From fa4386f13c4ad5d46bc23c443c95d662d7eace6d Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Mon, 10 Jun 2024 17:18:22 -0700
Subject: [PATCH 2/4] Add focus element

---
 frontend/src/components/bucket/BucketTable.vue | 14 +++++++-------
 frontend/src/store/navStore.ts                 |  4 +++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 104ee71e..a0d24c41 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -6,7 +6,7 @@ import { BucketChildConfig, BucketPermission, BucketTableBucketName } from '@/co
 import { Spinner } from '@/components/layout';
 import { SyncButton, ShareButton } from '@/components/common';
 import { Button, Column, Dialog, TreeTable, useConfirm } from '@/lib/primevue';
-import { useAppStore, useAuthStore, useBucketStore, usePermissionStore } from '@/store';
+import { useAppStore, useAuthStore, useBucketStore, useNavStore, usePermissionStore } from '@/store';
 import { DELIMITER, Permissions } from '@/utils/constants';
 import { getBucketPath, joinPath } from '@/utils/utils';
 
@@ -20,6 +20,7 @@ const permissionStore = usePermissionStore();
 const { getIsLoading } = storeToRefs(useAppStore());
 const { getUserId } = storeToRefs(useAuthStore());
 const { getBuckets } = storeToRefs(bucketStore);
+const { focusedElement } = storeToRefs(useNavStore());
 
 // State
 const expandedKeys: Ref<TreeTableExpandedKeys> = ref({});
@@ -58,6 +59,7 @@ const showPermissions = async (bucketId: string, bucketName: string) => {
   permissionsVisible.value = true;
   permissionsBucketId.value = bucketId;
   permissionBucketName.value = bucketName;
+  focusedElement.value = document.activeElement;
 };
 
 const confirmDeleteBucket = (bucketId: string) => {
@@ -238,10 +240,9 @@ watch(getBuckets, () => {
   treeData.value = tree;
 });
 const onDialogHide = () => {
-  console.log('jatinder');
-  debugger;
-  document.getElementById('folder_permissions').focus();
-  //debugger;
+  focusedElement.value?.focus();
+  focusedElement.value = null;
+  permissionsVisible.value = false;
 };
 </script>
 
@@ -357,7 +358,6 @@ const onDialogHide = () => {
       </template>
     </Column>
   </TreeTable>
-
   <!-- eslint-disable vue/no-v-model-argument -->
   <Dialog
     id="permissions_dialog"
@@ -367,7 +367,7 @@ const onDialogHide = () => {
     class="bcbox-info-dialog"
     aria-labelledby="permissions_label"
     aria-describedby="permissions_desc"
-    @hide="onDialogHide"
+    @after-hide="onDialogHide"
     focus-trap
   >
     <!-- eslint-enable vue/no-v-model-argument -->
diff --git a/frontend/src/store/navStore.ts b/frontend/src/store/navStore.ts
index 98a606c9..528486ba 100644
--- a/frontend/src/store/navStore.ts
+++ b/frontend/src/store/navStore.ts
@@ -7,6 +7,7 @@ import type { RouteLocationNormalized } from 'vue-router';
 export type NavStoreState = {
   home: Ref<Object>;
   items: Ref<Array<any>>;
+  focusedElement: Ref<any>;
 };
 
 export const useNavStore = defineStore('nav', () => {
@@ -16,7 +17,8 @@ export const useNavStore = defineStore('nav', () => {
       label: 'Home',
       to: '/'
     }),
-    items: ref([])
+    items: ref([]),
+    focusedElement: ref(null)
   };
 
   // Getters

From 22b72d5db20ee202582da66ea21adda45b60b768 Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Tue, 11 Jun 2024 12:09:06 -0700
Subject: [PATCH 3/4] Add focus element

---
 frontend/src/assets/main.scss                       | 1 -
 frontend/src/components/bucket/BucketPermission.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index 3fa0a6e5..ba570ec4 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -86,7 +86,6 @@ a:focus-visible {
 a button:focus-visible {
   box-shadow: none;
 }
-.bcbox-info-dialog:focus-visible
 div:focus-visible {
   outline: 0 none;
   box-shadow: inset 0px 0px 0 0.2rem #a6d5fa;
diff --git a/frontend/src/components/bucket/BucketPermission.vue b/frontend/src/components/bucket/BucketPermission.vue
index a92bdc20..3f12d48a 100644
--- a/frontend/src/components/bucket/BucketPermission.vue
+++ b/frontend/src/components/bucket/BucketPermission.vue
@@ -8,7 +8,6 @@ import { useAlert } from '@/composables/useAlert';
 import { Button, Checkbox, Column, DataTable } from '@/lib/primevue';
 import { usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
-import FocusTrap from 'primevue/focustrap';
 import type { Ref } from 'vue';
 import type { UserPermissions } from '@/types';
 

From 04d6c238bd66533c558e6f2550b5efa2fd8faadd Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Tue, 11 Jun 2024 12:39:25 -0700
Subject: [PATCH 4/4] Update tab navigation to object Permissions

---
 frontend/src/assets/main.scss                 |  1 +
 .../components/bucket/BucketPermission.vue    |  2 ++
 .../src/components/bucket/BucketTable.vue     |  9 ++------
 .../components/object/ObjectPermission.vue    |  7 ++++++
 .../components/object/ObjectPublicToggle.vue  |  1 +
 .../src/components/object/ObjectTable.vue     | 22 ++++++++++++++++---
 frontend/src/utils/utils.ts                   | 18 ++++++++++++---
 7 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index ba570ec4..f41b9182 100644
--- a/frontend/src/assets/main.scss
+++ b/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;
diff --git a/frontend/src/components/bucket/BucketPermission.vue b/frontend/src/components/bucket/BucketPermission.vue
index 3f12d48a..903cf100 100644
--- a/frontend/src/components/bucket/BucketPermission.vue
+++ b/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" />
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index a0d24c41..e30cb081 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/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>
diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index f215b7ba..0da62b60 100644
--- 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>
@@ -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>
diff --git a/frontend/src/components/object/ObjectPublicToggle.vue b/frontend/src/components/object/ObjectPublicToggle.vue
index 4e5089ec..1cc89ca9 100644
--- 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
index cc01779b..3b617d7c 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/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,10 +380,14 @@ 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>
@@ -387,10 +395,18 @@ const selectedFilters = (payload: any) => {
           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>
 
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 3df2ff6b..27415b09 100644
--- a/frontend/src/utils/utils.ts
+++ b/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;
+}