#2490: accessibility fixes and added more back tests

NationalSecurityAgency · May 28, 2024 · 041eb4b · 041eb4b
1 parent 4213d0c
commit 041eb4b
Show file tree

Hide file tree

Showing 32 changed files with 180 additions and 127 deletions.
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -140,7 +140,7 @@ jobs:
       - name: Run Cypress tests
         run: |
           cd e2e-tests
-          ../.github/scripts/runSubsetOfCypressTests.sh -t 6 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|/inception|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|/error_pages_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/|/learning-path/|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver_conf_skills_spec|/approver_conf_spec|/approver_conf_userTags_spec|/approver_conf_users_spec|/approver_role_project_table_spec|/approver_role_spec|/manage-my-projects_spec|/accessibility/accessibility_quiz_specs'
+          ../.github/scripts/runSubsetOfCypressTests.sh -t 6 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|/inception|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|/error_pages_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/|/learning-path/|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver_conf_skills_spec|/approver_conf_spec|/approver_conf_userTags_spec|/approver_conf_users_spec|/approver_role_project_table_spec|/approver_role_spec|/manage-my-projects_spec|/accessibility/accessibility_quiz_specs|/accessibility/accessibility_project_specs|/accessibility/accessibility_catalog_specs'
           cd ..
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu'

diff --git a/dashboard-prime/public/themes/skills-light-green/theme.css b/dashboard-prime/public/themes/skills-light-green/theme.css
diff --git a/dashboard-prime/src/components/settings/ProjectSettings.vue b/dashboard-prime/src/components/settings/ProjectSettings.vue
@@ -597,7 +597,7 @@ const saveSettings = ((dirtyChanges) => {
 
           <div class="flex flex-row">
             <div class="md:col-5 xl:col-3 text-secondary" id="groupDescriptions">
-              Always Show Group Descriptions:
+              <span id="groupDescriptionsLabel">Always Show Group Descriptions:</span>
               <inline-help
                   target-id="groupDescriptionsHelp"
                   msg="Toggle this setting to always show the group's descriptions in this project"/>

diff --git a/dashboard-prime/src/components/skills/SkillsTable.vue b/dashboard-prime/src/components/skills/SkillsTable.vue
@@ -579,11 +579,6 @@ const isLoading = computed(() => {
             </div>
             <div class="flex-none">
               <div class="flex">
-                <router-link
-                  :to="{ name:'SkillOverview', params: { projectId: slotProps.data.projectId, subjectId, skillId: slotProps.data.skillId }}"
-                >
-                </router-link>
-
                 <ButtonGroup v-if="!projConfig.isReadOnlyProj" class="mt-2 ml-1">
                   <SkillsButton
                     :id="`editSkillButton_${slotProps.data.skillId}`"

diff --git a/dashboard-prime/src/components/skills/badges/AddSkillsToBadgeDialog.vue b/dashboard-prime/src/components/skills/badges/AddSkillsToBadgeDialog.vue
@@ -150,6 +150,7 @@ const addSkillsToBadge = (navToNextStep) => {
     :close-on-escape="true"
     class="w-11 xl:w-8"
     v-model:visible="model"
+    :pt="{ maximizableButton: { 'aria-label': 'Expand to full screen and collapse back to the original size of the dialog' } }"
   >
     <div data-cy="addSkillsToBadgeModalContent">
       <skills-spinner :is-loading="isLoadingData" class="my-8" />

diff --git a/dashboard-prime/src/components/skills/catalog/ExportToCatalogDialog.vue b/dashboard-prime/src/components/skills/catalog/ExportToCatalogDialog.vue
@@ -133,6 +133,7 @@ const isExportable = computed(() => {
     class="w-11 xl:w-8"
     @update:visible="onUpdateVisible"
     v-model:visible="model"
+    :pt="{ maximizableButton: { 'aria-label': 'Expand to full screen and collapse back to the original size of the dialog' } }"
   >
     <skills-spinner :is-loading="loadingData" />
     <div v-if="!loadingData">

diff --git a/dashboard-prime/src/components/skills/catalog/ExportedSkills.vue b/dashboard-prime/src/components/skills/catalog/ExportedSkills.vue
@@ -155,6 +155,9 @@ const doRemoveSkill = () => {
               </template>
             </Column>
             <Column class="md:w-2rem" :class="{'flex': responsive.md.value }">
+              <template #header>
+                <span class="sr-only">Controls Heading - Not sortable</span>
+              </template>
               <template #body="slotProps">
                 <SkillsButton
                   :id="`deleteSkillButton_${slotProps.data.skillId}`"

diff --git a/dashboard-prime/src/components/skills/catalog/ImportFromCatalogDialog.vue b/dashboard-prime/src/components/skills/catalog/ImportFromCatalogDialog.vue
@@ -196,6 +196,7 @@ const onUpdateVisible = (newVal) => {
     class="w-11 xl:w-8"
     @update:visible="onUpdateVisible"
     v-model:visible="model"
+    :pt="{ maximizableButton: { 'aria-label': 'Expand to full screen and collapse back to the original size of the dialog' } }"
   >
     <skills-spinner :is-loading="initialLoad" />
     <div v-if="!initialLoad">

diff --git a/dashboard-prime/src/components/skills/reuseSkills/ReuseOrMoveSkillsDialog.vue b/dashboard-prime/src/components/skills/reuseSkills/ReuseOrMoveSkillsDialog.vue
@@ -119,6 +119,7 @@ const handleFocus = () => {
     :close-on-escape="true"
     class="w-11 xl:w-8"
     v-model:visible="model"
+    :pt="{ maximizableButton: { 'aria-label': 'Expand to full screen and collapse back to the original size of the dialog' } }"
   >
     <div data-cy="reuseOrMoveDialog">
       <skills-spinner :is-loading="isLoadingData" class="my-8" />

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApproval.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApproval.vue
@@ -7,6 +7,8 @@ import SkillsDataTable from "@/components/utils/table/SkillsDataTable.vue";
 import DateCell from "@/components/utils/table/DateCell.vue";
 import MarkdownText from '@/common-components/utilities/markdown/MarkdownText.vue'
 import RejectSkillModal from "@/components/skills/selfReport/RejectSkillModal.vue";
+import { useColors } from '@/skills-display/components/utilities/UseColors.js'
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
 
 const route = useRoute();
 const props = defineProps({
@@ -17,6 +19,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['approval-action']);
 const announcer = useSkillsAnnouncer();
+const colors = useColors()
+const responsive = useResponsiveBreakpoints()
 
 const approvals = ref([]);
 const loading = ref(true);
@@ -138,24 +142,28 @@ const toggleRow = (row) => {
 </script>
 
 <template>
-  <Card>
+  <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader title="Self Reported Skills Requiring Approval">
         <template #headerContent>
-          <div v-if="isEmailEnabled" data-cy="unsubscribeContainer">
-            <InputSwitch v-model="emailSubscribed" @update:modelValue="toggleUnsubscribe" class="mr-2" data-cy="unsubscribeSwitch" /> {{ emailSubscribed ? 'Subscribed' : 'Unsubscribed' }}
+          <div v-if="isEmailEnabled" data-cy="unsubscribeContainer" class="flex align-content-center align-items-center">
+            {{ emailSubscribed ? 'Subscribed' : 'Unsubscribed' }} <InputSwitch v-model="emailSubscribed"
+                                                                               @update:modelValue="toggleUnsubscribe"
+                                                                               aria-label="Enable to receive Skill Approval request emails"
+                                                                               class="ml-2"
+                                                                               data-cy="unsubscribeSwitch" />
           </div>
         </template>
       </SkillsCardHeader>
     </template>
     <template #content>
-      <div class="flex mb-3">
+      <div class="flex p-3">
         <div class="flex flex-1">
-          <SkillsButton size="small" @click="loadApprovals" aria-label="Sync Records" data-cy="syncApprovalsBtn" class="mr-2 mt-1" icon="fas fa-sync-alt" />
+          <SkillsButton size="small" @click="loadApprovals" aria-label="Sync Records" data-cy="syncApprovalsBtn" class="" icon="fas fa-sync-alt" />
         </div>
         <div class="flex flex-1 justify-content-end">
-          <SkillsButton size="small" @click="showRejectModal=true" data-cy="rejectBtn" class="mt-1 ml-2" :disabled="selectedItems.length === 0" icon="fa fa-times-circle" label="Reject" />
-          <SkillsButton size="small" @click="approve" data-cy="approveBtn" class="mt-1 ml-2" :disabled="selectedItems.length === 0" icon="fa fa-check" label="Approve" />
+          <SkillsButton size="small" @click="showRejectModal=true" data-cy="rejectBtn" class="" :disabled="selectedItems.length === 0" icon="fa fa-times-circle" label="Reject" />
+          <SkillsButton size="small" @click="approve" data-cy="approveBtn" class="ml-2" :disabled="selectedItems.length === 0" icon="fa fa-check" label="Approve" />
         </div>
       </div>
 
@@ -173,10 +181,15 @@ const toggleRow = (row) => {
                        @page="pageChanged"
                        data-key="id"
                        @sort="sortTable">
-        <Column selectionMode="multiple" headerStyle="width: 3rem" body-class="row-selection-item"></Column>
-        <Column field="request">
+        <Column selectionMode="multiple" :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-user-plus skills-color-crossProjects" /> Requested</span>
+            <span class="mr-1 lg:mr-0 lg:hidden"><i class="fas fa-check-double"
+                                                    aria-hidden="true"></i> Select Rows:</span>
+          </template>
+        </Column>
+        <Column field="request" :class="{'flex': responsive.md.value }">
+          <template #header>
+            <span class="mr-1"><i class="fas fa-user-plus" :class="colors.getTextClass(1)"/> Requested</span>
           </template>
           <template #body="slotProps">
             <div>
@@ -191,24 +204,24 @@ const toggleRow = (row) => {
                 <Badge class="ml-2">+ {{ slotProps.data.points }} Points</Badge>
             </div>
             <SkillsButton size="small" variant="outline-info"
-                      class="mr-2 py-0 px-1 mt-1"
+                      class="mr-2 py-0 px-1 mt-1 ml-2 lg:ml-0"
                       @click="toggleRow(slotProps.data.id)"
                       :aria-label="`Show Justification for ${slotProps.data.name}`"
                       :data-cy="`expandDetailsBtn_${slotProps.data.skillId}`" :icon="expandedRows[slotProps.data.id] ? 'fa fa-minus-square' : 'fa fa-plus-square'" label="Justification">
             </SkillsButton>
           </template>
         </Column>
-        <Column field="userId" sortable>
+        <Column field="userId" sortable :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-hand-pointer skills-color-skills" /> For User</span>
+            <span class="mr-1"><i class="fas fa-hand-pointer" :class="colors.getTextClass(2)"/> For User</span>
           </template>
           <template #body="slotProps">
             {{ slotProps.data.userIdForDisplay }}
           </template>
         </Column>
-        <Column field="requestedOn" sortable>
+        <Column field="requestedOn" sortable :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-clock skills-color-access" /> Requested On</span>
+            <span class="mr-1"><i class="fas fa-clock" :class="colors.getTextClass(3)" /> Requested On</span>
           </template>
           <template #body="slotProps">
             <date-cell :value="slotProps.data.requestedOn" />

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalHistory.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalHistory.vue
@@ -7,9 +7,13 @@ import SkillsDataTable from "@/components/utils/table/SkillsDataTable.vue";
 import DateCell from "@/components/utils/table/DateCell.vue";
 import ShowMore from "@/components/skills/selfReport/ShowMore.vue";
 import MarkdownText from '@/common-components/utilities/markdown/MarkdownText.vue'
+import { useColors } from '@/skills-display/components/utilities/UseColors.js'
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
 
 const route = useRoute();
 const announcer = useSkillsAnnouncer();
+const colors = useColors()
+const responsive = useResponsiveBreakpoints()
 
 const loading = ref(true);
 const pageSize = ref(5);
@@ -114,12 +118,12 @@ defineExpose( {
 </script>
 
 <template>
-  <Card>
+  <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader title="Approval History"></SkillsCardHeader>
     </template>
     <template #content>
-      <div class="flex gap-2">
+      <div class="flex flex-column md:flex-row gap-2 pt-3 px-3">
         <div class="w-full">
           <label for="skill-filter" class="ml-1">Skill Name</label>
           <InputText type="text" class="w-full mt-2" placeholder="Skill Name" v-model="filters.skill" id="skill-filter"
@@ -136,7 +140,7 @@ defineExpose( {
                      v-on:keydown.enter="loadApprovalsHistory" data-cy="selfReportApprovalHistory-approverUserIdFilter" />
         </div>
       </div>
-      <div class="flex gap-2 mt-4 mb-4">
+      <div class="flex gap-2 mt-4 mb-4 px-3">
         <SkillsButton size="small" @click="loadApprovalsHistory" data-cy="selfReportApprovalHistory-filterBtn" icon="fa fa-filter" label="Filter" />
         <SkillsButton size="small" @click="reset" class="ml-1" data-cy="selfReportApprovalHistory-resetBtn" label="Reset" icon="fa fa-times" />
       </div>
@@ -153,9 +157,9 @@ defineExpose( {
                        @page="pageChanged"
                        data-key="id"
                        @sort="sortTable">
-        <Column field="skillName" sortable>
+        <Column field="skillName" sortable :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-graduation-cap skills-color-skills" /> Requested</span>
+            <span class=""><i class="fas fa-graduation-cap mr-1" :class="colors.getTextClass(1)"/> Requested</span>
           </template>
           <template #body="slotProps">
             <div>
@@ -177,9 +181,9 @@ defineExpose( {
             </SkillsButton>
           </template>
         </Column>
-        <Column field="rejectedOn" sortable>
+        <Column field="rejectedOn" sortable :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-question-circle skills-color-access"></i> Response</span>
+            <span class=""><i class="fas fa-question-circle mr-1" :class="colors.getTextClass(2)"></i> Response</span>
           </template>
           <template #body="slotProps">
             <div v-if="slotProps.data.rejectedOn"><Badge variant="danger"><i class="fas fa-thumbs-down"></i> <span class="text-uppercase">Rejected</span></Badge></div>
@@ -189,17 +193,17 @@ defineExpose( {
             <div v-if="slotProps.data.rejectionMsg"><span class="text-primary text-break">Explanation:</span> <show-more :text="slotProps.data.rejectionMsg"/></div>
           </template>
         </Column>
-        <Column field="requestedOn" sortable>
+        <Column field="requestedOn" sortable :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-user-clock skills-color-crossProjects"></i> Requested On</span>
+            <span class=""><i class="fas fa-user-clock mr-1" :class="colors.getTextClass(3)"></i> Requested On</span>
           </template>
           <template #body="slotProps">
             <date-cell :value="slotProps.data.requestedOn" />
           </template>
         </Column>
-        <Column field="approverActionTakenOn" sortable>
+        <Column field="approverActionTakenOn" sortable :class="{'flex': responsive.md.value }">
           <template #header>
-            <span class="text-primary"><i class="fas fa-stopwatch skills-color-access"></i> Response On</span>
+            <span class=""><i class="fas fa-stopwatch mr-1" :class="colors.getTextClass(4)"></i> Response On</span>
           </template>
           <template #body="slotProps">
             <date-cell :value="slotProps.data.approverActionTakenOn" />