From d1d27931049a7a771c5c0e12951c49f3dfa689ce Mon Sep 17 00:00:00 2001
From: nsedrickm <nsedrick101@gmail.com>
Date: Sun, 21 Aug 2022 18:13:55 +0100
Subject: [PATCH] mgr/dashboard: add cypress e2e accessibility tests for
 dashboard

* Add cypress e2e accessibility tests
* Log accessibility violations to console for quick debugging
* Disable retries to avoid duplicate logs

Signed-off-by: nsedrickm <nsedrick101@gmail.com>
---
 .../integration/a11y/dashboard.e2e-spec.ts    | 27 +++++++++++++++++++
 .../frontend/cypress/plugins/index.js         |  2 +-
 .../dashboard/dashboard.component.html        | 10 ++++---
 .../dashboard/dashboard.component.scss        |  2 +-
 .../health-pie/health-pie.component.html      |  1 -
 5 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/dashboard.e2e-spec.ts

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/dashboard.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/dashboard.e2e-spec.ts
new file mode 100644
index 00000000000..4feea0da71d
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/dashboard.e2e-spec.ts
@@ -0,0 +1,27 @@
+import { DashboardPageHelper } from '../ui/dashboard.po';
+
+describe('Dashboard Main Page', { retries: 0 }, () => {
+  const dashboard = new DashboardPageHelper();
+
+  beforeEach(() => {
+    cy.login();
+    Cypress.Cookies.preserveOnce('token');
+    dashboard.navigateTo();
+  });
+
+  describe('Dashboard accessibility', () => {
+    it('should have no accessibility violations', () => {
+      cy.injectAxe();
+      cy.checkAccessibility(
+        {
+          exclude: [['.cd-navbar-main']]
+        },
+        {
+          rules: {
+            'page-has-heading-one': { enabled: false }
+          }
+        }
+      );
+    });
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/plugins/index.js b/src/pybind/mgr/dashboard/frontend/cypress/plugins/index.js
index d9294002ba4..b1ba01b665d 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/plugins/index.js
+++ b/src/pybind/mgr/dashboard/frontend/cypress/plugins/index.js
@@ -19,7 +19,7 @@ module.exports = (on, _config) => {
     log({ message, optional }) {
       optional ? console.log(message, optional) : console.log(message);
       return null;
-    },
+    }
   });
 };
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html
index 2d03ea3e6e9..a79287e2f04 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html
@@ -1,4 +1,7 @@
-<div>
+<main aria-label="Dashboard" >
+  <a href="#main"
+     class="sr-only">skip to content</a>
+
   <cd-refresh-selector></cd-refresh-selector>
 
   <ng-container *ngIf="hasGrafana">
@@ -24,5 +27,6 @@
     <div [ngbNavOutlet]="nav"></div>
   </ng-container>
 
-  <cd-health *ngIf="!hasGrafana"></cd-health>
-</div>
+  <cd-health id="main"
+             *ngIf="!hasGrafana"></cd-health>
+</main>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.scss
index 04eee2d6f25..873fb5d3b80 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.scss
@@ -1,3 +1,3 @@
-div {
+main {
   padding-top: 20px;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
index ba8176beab3..0a2535fc914 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
@@ -11,6 +11,5 @@
   </canvas>
   <div class="chartjs-tooltip"
        #chartTooltip>
-    <table></table>
   </div>
 </div>
-- 
2.39.5