From 9a7a60293ae5aa531d7e6fc2739756eb0ca34b52 Mon Sep 17 00:00:00 2001
From: Don Walizer <12420708+dwalizer@users.noreply.github.com>
Date: Mon, 24 Jun 2024 12:34:55 -0400
Subject: [PATCH] #2490 Re-add accessibility tests, fix issues

---
 .../projectAchievements/AchievementsNavigator.vue    |  6 +++---
 .../metrics/projectSkills/SkillsUsageMetrics.vue     | 10 +++++-----
 .../src/components/utils/cards/SkillsCardHeader.vue  |  2 +-
 .../e2e/accessibility/accessibility_project_specs.js | 12 ++++++------
 .../e2e/accessibility/accessibility_subect_specs.js  |  2 +-
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue b/dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue
index d3bfe9007d..c4ed566dcf 100644
--- a/dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue
+++ b/dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue
@@ -189,8 +189,8 @@ const reloadTable = () => {
           </div>
         </div>
         <div class="flex lg:pl-3 mb-3 lg:mt-3">
-        <SkillsButton size="small" @click="reloadTable" data-cy="achievementsNavigator-filterBtn" icon="fa fa-filter" label="Filter" />
-        <SkillsButton size="small" @click="reset" class="ml-1" data-cy="achievementsNavigator-resetBtn" icon="fa fa-times" label="Reset" />
+        <SkillsButton size="small" aria-label="Filter" @click="reloadTable" data-cy="achievementsNavigator-filterBtn" icon="fa fa-filter" label="Filter" />
+        <SkillsButton size="small" aria-label="Reset" @click="reset" class="ml-1" data-cy="achievementsNavigator-resetBtn" icon="fa fa-times" label="Reset" />
       </div>
       </div>
       <SkillsDataTable
@@ -219,7 +219,7 @@ const reloadTable = () => {
               </div>
               <div class="flex ml-2">
                 <router-link :to="{ name: 'SkillsDisplaySkillsDisplayPreviewProject', params: { projectId: route.paramsprojectId, userId: slotProps.data.userId } }">
-                  <SkillsButton size="small" data-cy="achievementsNavigator-clientDisplayBtn"><i class="fa fa-eye"/></SkillsButton>
+                  <SkillsButton aria-label="View Project" size="small" data-cy="achievementsNavigator-clientDisplayBtn"><i class="fa fa-eye"/></SkillsButton>
                 </router-link>
               </div>
             </div>
diff --git a/dashboard-prime/src/components/metrics/projectSkills/SkillsUsageMetrics.vue b/dashboard-prime/src/components/metrics/projectSkills/SkillsUsageMetrics.vue
index 0c8445c018..3957ebee12 100644
--- a/dashboard-prime/src/components/metrics/projectSkills/SkillsUsageMetrics.vue
+++ b/dashboard-prime/src/components/metrics/projectSkills/SkillsUsageMetrics.vue
@@ -104,15 +104,15 @@ const loadData = () => {
             <label>Skill Usage Filters</label>
             <div class="flex gap-2">
               <ToggleButton onLabel="Overlooked Skill" offLabel="Overlooked Skill" v-model="filters.overlookedTag"
-                            data-cy="overlookedFilterButton" />
+                            data-cy="overlookedFilterButton" aria-label="Overlooked Skill" />
               <ToggleButton onLabel="Top Skill" offLabel="Top Skill" v-model="filters.topSkillTag"
-                            data-cy="topSkillFilterButton" />
+                            data-cy="topSkillFilterButton" aria-label="Top Skill" />
               <ToggleButton onLabel="High Activity" offLabel="High Activity" v-model="filters.highActivityTag"
-                            data-cy="highActivityFilterButton" />
+                            data-cy="highActivityFilterButton" aria-label="High Activity" />
               <ToggleButton onLabel="Never Achieved" offLabel="Never Achieved" v-model="filters.neverAchieved"
-                            data-cy="neverAchievedFilterButton" />
+                            data-cy="neverAchievedFilterButton" aria-label="Never Achieved" />
               <ToggleButton onLabel="Never Reported" offLabel="Never Reported" v-model="filters.neverReported"
-                            data-cy="neverReportedFilterButton" />
+                            data-cy="neverReportedFilterButton" aria-label="Never Reported" />
             </div>
             <div class="font-light text-sm mt-1">Please Note: These filters become more meaningful with extensive usage
             </div>
diff --git a/dashboard-prime/src/components/utils/cards/SkillsCardHeader.vue b/dashboard-prime/src/components/utils/cards/SkillsCardHeader.vue
index 9998c3857a..fe73b48388 100644
--- a/dashboard-prime/src/components/utils/cards/SkillsCardHeader.vue
+++ b/dashboard-prime/src/components/utils/cards/SkillsCardHeader.vue
@@ -18,7 +18,7 @@ defineProps(['title']);
 </script>
 
 <template>
-  <div class="border-bottom-1 p-3 surface-border surface-100 flex">
+  <div class="border-bottom-1 p-3 surface-border surface-100 flex" data-cy="card-header">
     <span class="font-bold flex-1"><slot name="headerIcon" />{{ title }}</span>
     <slot name="headerContent" />
   </div>
diff --git a/e2e-tests/cypress/e2e/accessibility/accessibility_project_specs.js b/e2e-tests/cypress/e2e/accessibility/accessibility_project_specs.js
index 8a492bb270..1b9acd0758 100644
--- a/e2e-tests/cypress/e2e/accessibility/accessibility_project_specs.js
+++ b/e2e-tests/cypress/e2e/accessibility/accessibility_project_specs.js
@@ -183,9 +183,9 @@ describe('Accessibility Tests', () => {
         cy.customA11y()
     });
 
-    it.skip('project - metrics', () => {
+    it('project - metrics', () => {
         cy.visit('/administrator/projects/proj1/metrics');
-        cy.get('[data-cy="metricsCard-header"').contains('Users per day');
+        cy.get('[data-cy="card-header"]').contains('Users per day');
         cy.get('[data-cy="distinctNumUsersOverTime"]').contains('This chart needs at least 2 days of user activity.');
         cy.get('[data-cy="projectLastReportedSkillValue"]')
         cy.get('[data-cy="pageHeaderStat_Skills"] [data-cy="statValue"]').should('have.text', '4')
@@ -195,7 +195,7 @@ describe('Accessibility Tests', () => {
         cy.customA11y()
     });
 
-    it.skip('project - achievements metrics', () => {
+    it('project - achievements metrics', () => {
         cy.visit('/administrator/projects/proj1/metrics/achievements');
         cy.contains('Level 2: 1 users');
         cy.contains('Level 1: 5 users');
@@ -212,7 +212,7 @@ describe('Accessibility Tests', () => {
         cy.customA11y()
     })
 
-    it.skip('project - subject metrics', () => {
+    it('project - subject metrics', () => {
         cy.visit('/administrator/projects/proj1/metrics/subjects');
 
         cy.get('[data-cy="Subjects-metrics-link"]')
@@ -226,7 +226,7 @@ describe('Accessibility Tests', () => {
 
     });
 
-    it.skip('project - skills metrics', () => {
+    it('project - skills metrics', () => {
         cy.visit('/administrator/projects/proj1/metrics/skills');
         cy.get('[data-cy="skillsNavigator-table"] [data-cy="skillsBTableTotalRows"]').should('have.text', '4')
 
@@ -235,7 +235,7 @@ describe('Accessibility Tests', () => {
         cy.customA11y()
     });
 
-    it.skip('project - access page', () => {
+    it('project - access page', () => {
         cy.visit('/administrator/projects/proj1/access');
 
         const tableSelector = '[data-cy="roleManagerTable"]';
diff --git a/e2e-tests/cypress/e2e/accessibility/accessibility_subect_specs.js b/e2e-tests/cypress/e2e/accessibility/accessibility_subect_specs.js
index c7c4d645e6..19a4a6a92d 100644
--- a/e2e-tests/cypress/e2e/accessibility/accessibility_subect_specs.js
+++ b/e2e-tests/cypress/e2e/accessibility/accessibility_subect_specs.js
@@ -246,7 +246,7 @@ describe('Accessibility Tests', () => {
         // cy.customA11y();
     })
 
-    it.skip('subject - user - performed skills', () => {
+    it('subject - user - performed skills', () => {
         cy.visit('/administrator/projects/MyNewtestProject/users/u1/skillEvents');
         cy.injectAxe();
         cy.get('[data-cy="performedSkillsTable"]').contains('ID: skill1');