Merge pull request #46757 from nSedrickm/navigation-component-accessibility-update

mgr/dashboard: Improve accessibility for navigation components Reviewed-by: Ernesto Puerta <epuertat@redhat.com> Reviewed-by: Laura Flores <lflores@redhat.com> Reviewed-by: Nizamudeen A <nia@redhat.com> Reviewed-by: Pere Diaz Bou <pdiazbou@redhat.com>
2026-08-02 07:03:18 +00:00 · 2022-09-08 09:41:29 +05:30 · 2022-09-08 09:41:29 +05:30 · 165de92cc1
commit 165de92cc1
parent e85e121747 05c1b776c2
13 changed files with 88 additions and 24 deletions
--- 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
@ -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]');
+  });
+});
--- 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);
+});
--- 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": {
--- 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",
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
@ -4,7 +4,8 @@
  <a ngbDropdownToggle
     class="dropdown-toggle"
     i18n-title
-     title="Dashboard Settings">
+     title="Dashboard Settings"
+     role="button">
    <i [ngClass]="[icons.deepCheck]"></i>
    <span i18n
          class="d-md-none">Dashboard Settings</span>
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@ -2,7 +2,8 @@
     placement="bottom-right">
  <a ngbDropdownToggle
     i18n-title
-     title="Help">
+     title="Help"
+     role="button">
    <i [ngClass]="[icons.questionCircle]"></i>
    <span i18n
          class="d-md-none">Help</span>
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
@ -2,7 +2,8 @@
     placement="bottom-right">
  <a ngbDropdownToggle
     i18n-title
-     title="Logged in user">
+     title="Logged in user"
+     role="button">
    <i [ngClass]="[icons.user]"></i>
    <span i18n
          class="d-md-none">Logged in user</span>
@ -11,7 +12,7 @@
    <button ngbDropdownItem
            disabled
            i18n>Signed in as <strong>{{ username }}</strong></button>
-    <li class="dropdown-divider"></li>
+    <hr class="dropdown-divider" />
    <button ngbDropdownItem
            *ngIf="!sso"
            routerLink="/user-profile/edit">
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@ -96,10 +96,12 @@
        <a (click)="toggleSubMenu('cluster')"
           class="nav-link dropdown-toggle"
           [attr.aria-expanded]="displayedSubMenu == 'cluster'"
-           aria-controls="collapseBasic">
+           aria-controls="cluster-nav"
+           role="button">
          <ng-container i18n>Cluster</ng-container>
        </a>
        <ul class="list-unstyled"
+            id="cluster-nav"
            [ngbCollapse]="displayedSubMenu !== 'cluster'">
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_hosts"
@ -192,12 +194,14 @@
        <a class="nav-link dropdown-toggle"
           (click)="toggleSubMenu('block')"
           [attr.aria-expanded]="displayedSubMenu == 'block'"
-           aria-controls="collapseBasic"
+           aria-controls="block-nav"
+           role="button"
           [ngStyle]="blockHealthColor()">
          <ng-container i18n>Block</ng-container>
        </a>

        <ul class="list-unstyled"
+            id="block-nav"
            [ngbCollapse]="displayedSubMenu !== 'block'">
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_block_images"
@ -252,10 +256,12 @@
        <a class="nav-link dropdown-toggle"
           (click)="toggleSubMenu('rgw')"
           [attr.aria-expanded]="displayedSubMenu == 'rgw'"
-           aria-controls="collapseBasic">
+           aria-controls="gateway-nav"
+           role="button">
          <ng-container i18n>Object Gateway</ng-container>
        </a>
        <ul class="list-unstyled"
+            id="gateway-nav"
            [ngbCollapse]="displayedSubMenu !== 'rgw'">
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_rgw_daemons">
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@ -18,7 +18,7 @@
 ::ng-deep cd-navigation .cd-navbar-top {
  .cd-navbar-brand {
    background: vv.$secondary;
-    border-top: 4px solid vv.$primary;
+    border-top: 4px solid vv.$primary-wcag-aa-large-text;

    .navbar-brand,
    .navbar-brand:hover {
@ -49,7 +49,7 @@
    }

    .cd-navbar-utility > .active > a {
-      background-color: vv.$primary;
+      background-color: vv.$primary-wcag-aa-large-text;
      color: vv.$gray-200;
    }

@ -83,7 +83,7 @@
  .navbar-nav > li > .cd-navbar > a:hover,
  .navbar-nav > li > a:hover,
  .navbar-nav > li:hover {
-    background-color: vv.$primary;
+    background-color: vv.$primary-wcag-aa-large-text;
  }

  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@ -119,7 +119,7 @@
      }

      .open .dropdown-menu {
-        background-color: vv.$primary;
+        background-color: vv.$primary-wcag-aa-large-text;
        border: 0;
        padding-bottom: 0;
        padding-top: 0;
@ -131,12 +131,12 @@
      }

      .open .dropdown-menu > .active > a {
-        background-color: vv.$primary;
+        background-color: vv.$primary-wcag-aa-large-text;
      }
    }

    .navbar-nav > li > a:hover {
-      background-color: vv.$primary;
+      background-color: vv.$primary-wcag-aa-large-text;
    }
  }
 }
@ -150,9 +150,9 @@ $sidebar-width: 200px;
 .cd-navbar-primary .active > a,
 .cd-navbar-primary > .active > a:focus,
 .cd-navbar-primary > .active > a:hover {
-  background-color: vv.$primary !important;
+  background-color: vv.$primary-wcag-aa-large-text !important;
  border: 0 !important;
-  color: vv.$gray-200 !important;
+  color: vv.$white !important;
 }

 .wrapper {
@ -190,14 +190,14 @@ $sidebar-width: 200px;
      li a {
        color: vv.$white;
        display: block;
-        font-size: 1.1em;
+        font-size: 1.3em;
        padding: 10px;
        padding-left: 27px;

        text-decoration: none;

        &:hover {
-          background: vv.$primary;
+          background: vv.$primary-wcag-aa-large-text;
          color: vv.$white;
        }

@ -233,7 +233,7 @@ $sidebar-width: 200px;

  ul ul a {
    background: lighten(vv.$secondary, 10);
-    font-size: 0.9em !important;
+    font-size: 1.1em !important;
    padding-left: 40px !important;
  }

--- 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' };
      }
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@ -114,6 +114,7 @@
    <button class="close float-right"
            tabindex="-1"
            type="button"
+            title="close"
            (click)="closeSidebar()">
      <span>
        <i [ngClass]="icons.close"></i>
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@ -25,6 +25,7 @@ $cyan: #17a2b8 !default;
 $barley-white: #fcecba !default;

 $primary: #2b99a8 !default;
+$primary-wcag-aa-large-text: #25828e !default;
 $secondary: #374249 !default;
 $success: $green !default;
 $info: $primary !default;
--- 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