From 5081dd7689d7551ad7d9d95fa0fde461db8db20c Mon Sep 17 00:00:00 2001 From: nsedrickm Date: Sat, 23 Jul 2022 12:18:46 +0100 Subject: [PATCH] mgr/dashboard: Improve level A accessibility for missing aria labels in tabs and listitems Replace tab component ul and li elements with navs and ng-containers Fixes: https://tracker.ceph.com/issues/55872 Signed-off-by: nsedrickm --- .../integration/cluster/osds.e2e-spec.ts | 2 +- .../cypress/integration/page-helper.po.ts | 4 +- .../iscsi-tabs/iscsi-tabs.component.html | 20 +++++----- .../block/iscsi-tabs/iscsi-tabs.component.ts | 5 +-- .../image-list/image-list.component.html | 22 +++++------ .../rbd-details/rbd-details.component.html | 26 ++++++------- .../block/rbd-tabs/rbd-tabs.component.html | 38 ++++++++++++------- .../ceph/block/rbd-tabs/rbd-tabs.component.ts | 3 +- .../cephfs-tabs/cephfs-tabs.component.html | 28 +++++++------- .../host-details/host-details.component.html | 36 +++++++++--------- .../ceph/cluster/hosts/hosts.component.html | 21 +++++----- .../app/ceph/cluster/logs/logs.component.html | 22 +++++------ .../osd-details/osd-details.component.html | 38 +++++++++---------- .../osd/osd-list/osd-list.component.html | 18 ++++----- .../prometheus-tabs.component.html | 30 +++++++++------ .../prometheus-tabs.component.ts | 3 +- .../service-daemon-list.component.html | 18 ++++----- .../dashboard/dashboard.component.html | 16 ++++---- .../nfs-details/nfs-details.component.html | 18 ++++----- .../nfs-details/nfs-details.component.spec.ts | 2 +- .../pool-details/pool-details.component.html | 32 ++++++++-------- .../pool/pool-form/pool-form.component.html | 36 +++++++++--------- .../pool/pool-list/pool-list.component.html | 18 ++++----- .../rgw-daemon-details.component.html | 24 ++++++------ .../rgw-daemon-list.component.html | 24 ++++++------ .../rgw-user-details.component.html | 20 +++++----- .../smart-list/smart-list.component.html | 22 +++++------ .../auth/user-tabs/user-tabs.component.html | 22 ++++++----- .../src/styles/ceph-custom/_basics.scss | 4 ++ .../frontend/src/testing/unit-test-helper.ts | 4 +- 30 files changed, 302 insertions(+), 274 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts index e68d03bd542b..2fc148a1788c 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts @@ -39,7 +39,7 @@ describe('OSDs page', () => { }); it('should show the correct text for the tab labels', () => { - cy.get('#tabset-osd-details > li > a').then(($tabs) => { + cy.get('#tabset-osd-details > a').then(($tabs) => { const tabHeadings = $tabs.map((_i, e) => e.textContent).get(); expect(tabHeadings).to.eql([ diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts index 4531a70bb7fe..8b9104ed387e 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts @@ -72,11 +72,11 @@ export abstract class PageHelper { } getTabs() { - return cy.get('.nav.nav-tabs li'); + return cy.get('.nav.nav-tabs a'); } getTab(tabName: string) { - return cy.contains('.nav.nav-tabs li', tabName); + return cy.contains('.nav.nav-tabs a', tabName); } getTabText(index: number) { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.html index 3d328cb6bf32..ec4d07e235a2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.html @@ -1,14 +1,16 @@ - diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.ts index d4d21361bcdd..6631339538e0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-tabs/iscsi-tabs.component.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -import { Router } from '@angular/router'; @Component({ selector: 'cd-iscsi-tabs', templateUrl: './iscsi-tabs.component.html', styleUrls: ['./iscsi-tabs.component.scss'] }) -export class IscsiTabsComponent { - constructor(public router: Router) {} -} +export class IscsiTabsComponent {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html index d4972a41c135..ef72663cde90 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html @@ -1,8 +1,8 @@ - + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html index 83331773f576..17b466e72f13 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html @@ -3,11 +3,11 @@ -
    -
  • +
    • -
  • + + Snapshots @@ -137,16 +137,16 @@ [mirroring]="selection.mirror_mode" [rbdName]="selection.name"> -
    • -
  • + + Configuration -
    • + -
  • + Performance @@ -158,8 +158,8 @@ grafanaStyle="one"> -
    • -
+ +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.html index 657568c2230c..e11beb9bd5e6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.html @@ -1,23 +1,35 @@ - diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.ts index 056cb1764583..a9a57bfcdbcf 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { Router } from '@angular/router'; import { Permission } from '~/app/shared/models/permissions'; import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; @@ -13,7 +12,7 @@ export class RbdTabsComponent { grafanaPermission: Permission; url: string; - constructor(private authStorageService: AuthStorageService, public router: Router) { + constructor(private authStorageService: AuthStorageService) { this.grafanaPermission = this.authStorageService.getPermissions().grafana; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html index d2f7ad4b05b8..a4f88004435d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html @@ -1,18 +1,18 @@ - + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html index 7bda5c520a61..386d5b3c99b8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html @@ -1,25 +1,25 @@ - + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html index a6c597cd823a..aef7697da2f2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html @@ -1,7 +1,7 @@ - + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html index f233617422f9..bd4a25e7596c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html @@ -1,11 +1,11 @@
-
- -
  • + + Audit Logs @@ -66,8 +66,8 @@ -
    • -
  • + + Daemon Logs @@ -83,8 +83,8 @@ -
    • - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html index 4e107dc9cfc8..2b73a710ac34 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html @@ -1,10 +1,10 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html index 646064ec8b13..e09bb086c96b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html @@ -1,7 +1,7 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html index 3be6091a584c..273982caf26f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html @@ -1,22 +1,30 @@ - diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.ts index cccce1d92e33..136fe939177e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { Router } from '@angular/router'; import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service'; @@ -9,5 +8,5 @@ import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.s styleUrls: ['./prometheus-tabs.component.scss'] }) export class PrometheusTabsComponent { - constructor(public router: Router, public prometheusAlertService: PrometheusAlertService) {} + constructor(public prometheusAlertService: PrometheusAlertService) {} } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html index fc782c5658d1..14ec015d1b8e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html @@ -6,18 +6,18 @@ - + +
    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 a79287e2f048..feea20883efe 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 @@ -5,24 +5,24 @@ - +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html index 2a8b9453f3fa..042c9f664580 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html @@ -1,17 +1,17 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.spec.ts index fcf5305393cb..8e78c589a2c2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.spec.ts @@ -90,7 +90,7 @@ describe('NfsDetailsComponent', () => { }); it('should have 1 client', () => { - expect(elem('ul.nav-tabs li:nth-of-type(2) a').nativeElement.textContent).toBe('Clients (1)'); + expect(elem('nav.nav-tabs a:nth-of-type(2)').nativeElement.textContent).toBe('Clients (1)'); expect(component.clients).toEqual([ { access_type: 'RW', diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html index b9c197aefda2..07823eedfffa 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html @@ -1,10 +1,10 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html index 2df480edab26..e12e36c6391b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html @@ -254,10 +254,10 @@ - - - + +
    @@ -361,10 +361,10 @@
    - - - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html index 61af5c260b1e..cfbcdaaf184a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html @@ -1,7 +1,7 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html index 20b3f5ed8c5c..868a803e46ce 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html @@ -1,9 +1,9 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html index 88e82314f21c..fbd7d3263301 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html @@ -1,7 +1,7 @@ - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html index 2283f4c546f0..992a98ac83fc 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html @@ -1,9 +1,9 @@ -
      -
    • +
      • -
    • + + Keys @@ -171,8 +171,8 @@ -
      • -
    +     +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html index 805d7558e3df..909f3e7ed6de 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html @@ -13,11 +13,11 @@ i18n>No SMART data available. - + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-tabs/user-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-tabs/user-tabs.component.html index 3c102cf6676c..1ab4e1743b39 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-tabs/user-tabs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-tabs/user-tabs.component.html @@ -1,14 +1,18 @@ - diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss index 7a618f704fc1..8ee05900c3eb 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss @@ -141,3 +141,7 @@ mark { } } } + +a.nav-link { + color: vv.$primary-wcag-aa-large-text; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts index 574919d08ec2..668cdfe0c17b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts +++ b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts @@ -4,7 +4,7 @@ import { AbstractControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing'; -import { NgbModal, NgbNav, NgbNavItem } from '@ng-bootstrap/ng-bootstrap'; +import { NgbModal, NgbNav, NgbNavItem, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'; import _ from 'lodash'; import { configureTestSuite } from 'ng-bullet'; import { of } from 'rxjs'; @@ -622,7 +622,7 @@ export class TabHelper { private static getNgbNavItemsDebugElems(fixture: ComponentFixture) { const debugElem: DebugElement = fixture.debugElement; - return debugElem.queryAll(By.directive(NgbNavItem)); + return debugElem.queryAll(By.directive(NgbNavLink)); } } -- 2.47.3