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>
(cherry picked from commit d1d27931049a7a771c5c0e12951c49f3dfa689ce)

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 (file)
index 0000000..4feea0d
--- /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 d9294002ba4010eaebd41e33e0141657b1d35861..b1ba01b665d3b0429f78eb63aa57511cd9bd117b 100644 (file)
--- 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 2d03ea3e6e9bd79c36bcee0ddf87fb4d33ae330d..a79287e2f048e5b09e2aaa4e0e8c992266a330bb 100644 (file)
--- 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 04eee2d6f2560a52e37797cab1ca69e56f84c890..873fb5d3b80200db47c0fd38c6e4de1fcecda5c2 100644 (file)
--- 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 ba8176beab3b505aa95e9916011fceb0a22666cc..0a2535fc9142a70509e1a7b9cb7a3b0c090c29c1 100644 (file)
--- 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>