mgr/dashboard: add cypress e2e accessibility tests for navigation

* 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>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts
new file mode 100644 (file)
index 0000000..2a0c5c5
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts
@@ -0,0 +1,21 @@
+import { NavigationPageHelper } from '../ui/navigation.po';
+
+describe('Navigation accessibility', { retries: 0 }, () => {
+  const shared = new NavigationPageHelper();
+
+  beforeEach(() => {
+    cy.login();
+    Cypress.Cookies.preserveOnce('token');
+    shared.navigateTo();
+  });
+
+  it('top-nav should have no accessibility violations', () => {
+    cy.injectAxe();
+    cy.checkAccessibility('.cd-navbar-top');
+  });
+
+  it('sidebar should have no accessibility violations', () => {
+    cy.injectAxe();
+    cy.checkAccessibility('nav[id=sidebar]');
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts b/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts
index cdd39c680b7ad6f2d56510f13e504bd008ff28fc..04eabb8abbd8808e4884699b066660aace736a4c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts
@@ -5,6 +5,7 @@ declare global {
       logToConsole(message: string, optional?: any): void;
       text(): Chainable<string>;
       ceph2Login(username?: string, password?: string): Chainable<any>;
+      checkAccessibility(subject: any, axeOptions?: any, skip?: boolean): void;
     }
   }
 }
@@ -16,6 +17,7 @@ declare global {
 /* tslint:disable*/
 import { CdHelperClass } from '../../src/app/shared/classes/cd-helper.class';
 import { Permissions } from '../../src/app/shared/models/permissions';
+import { table } from 'table';
 /* tslint:enable*/
 let auth: any;
 
@@ -87,3 +89,32 @@ Cypress.Commands.add('text', { prevSubject: true }, (subject: any) => {
 Cypress.Commands.add('logToConsole', (message: string, optional?: any) => {
   cy.task('log', { message: `(${new Date().toISOString()}) ${message}`, optional });
 });
+
+// Print cypress-axe violations to the terminal
+function a11yErrorLogger(violations: any) {
+  const violationData = violations.flatMap(({ id, impact, description, nodes }: any) => {
+    return nodes.flatMap(({ html }: any) => {
+      return [
+        ['Test', Cypress.currentTest.title],
+        ['Error', id],
+        ['Impact', impact],
+        ['Description', description],
+        ['Element', html],
+        ['', '']
+      ];
+    });
+  });
+
+  cy.task('log', {
+    message: table(violationData, {
+      header: {
+        alignment: 'left',
+        content: Cypress.spec.relative
+      }
+    })
+  });
+}
+
+Cypress.Commands.add('checkAccessibility', (subject: any, axeOptions?: any, skip?: boolean) => {
+  cy.checkA11y(subject, axeOptions, a11yErrorLogger, skip);
+});

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index 93c8618818a3ee29ebcaa16096d071d158374001..bacad7f95175cf44db9f9c7a6c60335630953151 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -6797,9 +6797,9 @@
       "dev": true
     },
     "axe-core": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
-      "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
+      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==",
       "dev": true
     },
     "axios": {

diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index 23fca3d8512ea974b163153271eb6d6596eaa1a8..9a86b50368c1e99cbd6af496ee28e3d5d4c5e341 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -122,7 +122,7 @@
     "@types/node": "12.12.62",
     "@types/simplebar": "5.1.1",
     "@types/swagger-ui": "3.52.0",
-    "axe-core": "4.4.2",
+    "axe-core": "4.4.3",
     "codelyzer": "6.0.2",
     "cypress": "9.7.0",
     "cypress-axe": "0.14.0",
@@ -148,6 +148,7 @@
     "stylelint": "13.13.1",
     "stylelint-config-sass-guidelines": "7.1.0",
     "stylelint-declaration-use-variable": "1.7.3",
+    "table": "6.8.0",
     "transifex-i18ntool": "1.1.0",
     "ts-node": "9.0.0",
     "tslint": "6.1.3",

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
index 512feecef9d659e0777ecf36021a6501d927c800..a7cc40f5a8235a0648b183f866c948e5d3796929 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
@@ -87,7 +87,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
   blockHealthColor() {
     if (this.summaryData && this.summaryData.rbd_mirroring) {
       if (this.summaryData.rbd_mirroring.errors > 0) {
-        return { color: '#d9534f' };
+        return { color: '#f4926c' };
       } else if (this.summaryData.rbd_mirroring.warnings > 0) {
         return { color: '#f0ad4e' };
       }

diff --git a/src/pybind/mgr/dashboard/openapi.yaml b/src/pybind/mgr/dashboard/openapi.yaml
index dc90eb2cc5988eacdf000303e8f2070b34263c9f..343fae4dfcbb8726e2c82dc97ca56b2082279a53 100644 (file)
--- a/src/pybind/mgr/dashboard/openapi.yaml
+++ b/src/pybind/mgr/dashboard/openapi.yaml
@@ -10480,7 +10480,7 @@ tags:
   name: Auth
 - description: Cephfs Management API
   name: Cephfs
-- description: Get Cluster Details
+- description: Get Ceph Users
   name: Cluster
 - description: Manage Cluster Configurations
   name: ClusterConfiguration