#2721 Fix Axe violations

NationalSecurityAgency · Jul 26, 2024 · f71745b · f71745b
1 parent 5d182cd
commit f71745b
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/dashboard-prime/src/components/access/RoleManager.vue b/dashboard-prime/src/components/access/RoleManager.vue
@@ -26,6 +26,7 @@ import { useColors } from '@/skills-display/components/utilities/UseColors.js'
 import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
 import { userErrorState } from '@/stores/UserErrorState.js'
 import {useDialogMessages} from "@/components/utils/modal/UseDialogMessages.js";
+import DataTable from "primevue/datatable";
 
 const dialogMessages = useDialogMessages()
 // role constants
@@ -333,6 +334,7 @@ defineExpose({
           aria-label="User Roles"
           striped-rows
           paginator
+          :pt:paginator:paginatorWrapper:aria-label='`${title} Paginator`'
           v-model:sort-field="sortInfo.sortBy"
           v-model:sort-order="sortInfo.sortOrder"
           :rows="pageSize">

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSkill.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSkill.vue
@@ -233,6 +233,7 @@ const removeTagConf = (removedItem) => {
                          tableStoredStateId="skillApprovalConfSpecificUsersTable"
                          data-cy="skillApprovalSkillConfTable"
                          aria-label="Approval Configuration Skills"
+                         pt:paginator:paginatorWrapper:aria-label="Approval Configuration Skills Paginator"
                          :rows="pageSize"
                          :rowsPerPageOptions="possiblePageSizes"
                          v-model:sort-field="sortBy"

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSpecificUsers.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSpecificUsers.vue
@@ -142,7 +142,8 @@ const updateSelectedList = () => {
                         :value="data" paginator
                         tableStoredStateId="skillApprovalConfSpecificUsersTable"
                         data-cy="skillApprovalConfSpecificUsersTable"
-                         aria-label="Approval Configuration Users"
+                        aria-label="Approval Configuration Users"
+                        pt:paginator:paginatorWrapper:aria-label="Approval Configuration Users Paginator"
                         show-gridlines
                         striped-rows
                         :rows="pageSize"

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfUserTag.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfUserTag.vue
@@ -22,6 +22,7 @@ import NoContent2 from "@/components/utils/NoContent2.vue";
 import DateCell from "@/components/utils/table/DateCell.vue";
 import * as yup from "yup";
 import {useForm} from "vee-validate";
+import DataTable from "primevue/datatable";
 
 const emit = defineEmits(['conf-added', 'conf-removed']);
 const announcer = useSkillsAnnouncer();
@@ -119,6 +120,7 @@ const removeTagConf = (removedIem) => {
                      v-model:sort-order="sortOrder"
                      :value="data"
                      paginator
+                     pt:paginator:paginatorWrapper:aria-label="Approval Configuration User Tags Paginator"
                      aria-label="Approval Configuration User Tags"
                      tableStoredStateId="skillApprovalConfSpecificUsersTable">
       <Column :header="tagLabel" field="userTagValue" sortable>

diff --git a/dashboard-prime/src/skills-display/components/utilities/ListFilterMenu.vue b/dashboard-prime/src/skills-display/components/utilities/ListFilterMenu.vue
@@ -99,7 +99,7 @@ const focusOnProgressGroup = () => {
               data-cy="selectedFilter"/>
       </div>
     </div>
-    <OverlayPanel id="typeSelectorPanel" ref="menu" @show="focusOnProgressGroup">
+    <OverlayPanel id="typeSelectorPanel" ref="menu" @show="focusOnProgressGroup" aria-label="Type Selector Menu">
       <div>
         <PanelMenu :model="filtersInternal" class="w-full md:w-20rem" v-model:expandedKeys="expandedKeys">
           <template #item="{ item, props, root, active }">