From: nsedrickm <nsedrick101@gmail.com>
Date: Mon, 4 Jul 2022 15:14:17 +0000 (+0100)
Subject: mgr/dashboard: Improve level A accessibility for datatable component
X-Git-Tag: v18.0.0~169^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=020460cdec30adc7d4e12347db55f91d26d791bf;p=ceph.git

mgr/dashboard: Improve level A accessibility for datatable component

* Add accessible names for table action buttons, dropdowns and table input elements
* Update accent color to primary color
* Add custom row selection checkbox

Fixes: https://tracker.ceph.com/issues/56022
Signed-off-by: nsedrickm <nsedrick101@gmail.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index 905aaa96b69b..ef2a4481dbe2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -5,11 +5,12 @@
             class="btn btn-{{btnColor}}"
             [ngClass]="{'disabled': disableSelectionAction(currentAction)}"
             (click)="useClickAction(currentAction)"
+            [disabled]="disableSelectionAction(currentAction)"
             [routerLink]="useRouterLink(currentAction)"
             [attr.aria-label]="currentAction.name"
             [preserveFragment]="currentAction.preserveFragment ? '' : null">
       <i [ngClass]="[currentAction.icon]"></i>
-      <span>{{ currentAction.name }}</span>
+      <span class="action-label">{{ currentAction.name }}</span>
     </button>
   </ng-container>
   <div class="btn-group"
@@ -17,7 +18,8 @@
        role="group"
        *ngIf="dropDownActions.length > 1"
        aria-label="Button group with nested dropdown">
-    <button class="btn btn-{{btnColor}} dropdown-toggle-split"
+    <button aria-label="dropdown-menu-toggle"
+            class="btn btn-{{btnColor}} dropdown-toggle-split"
             ngbDropdownToggle>
       <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
       <span *ngIf="!dropDownOnly"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
index f996de72794e..084b466150a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
@@ -1,8 +1,19 @@
+@use './src/styles/vendor/variables' as vv;
+
 button.disabled {
+  color: vv.$gray-500;
   cursor: default !important;
   pointer-events: auto;
 }
 
+button.dropdown-item:hover {
+  background-color: vv.$gray-300;
+}
+
 .action-icon {
   padding-right: 1.5rem;
 }
+
+.action-label {
+  font-weight: bold;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index b38477c81373..003996582678 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -21,7 +21,8 @@
            placement="bottom-right"
            class="tc_filter_name">
         <button ngbDropdownToggle
-                class="btn btn-light">
+                class="btn btn-light"
+                title="Filter">
           <i [ngClass]="[icons.large, icons.filter]"></i>
           {{ selectedFilter.column.name }}
         </button>
@@ -63,13 +64,15 @@
           <i [ngClass]="[icons.search]"></i>
         </span>
       </span>
-      <input class="form-control"
+      <input aria-label="search"
+             class="form-control"
              type="text"
              [(ngModel)]="search"
              (keyup)="updateFilter()">
       <div class="input-group-append">
         <button type="button"
                 class="btn btn-light"
+                title="Clear"
                 (click)="onClearSearch()">
           <i class="icon-prepend {{ icons.destroy }}"></i>
         </button>
@@ -80,7 +83,8 @@
     <!-- pagination limit -->
     <div class="input-group dataTables_paginate"
          *ngIf="limit">
-      <input class="form-control"
+      <input aria-label="table pagination"
+             class="form-control"
              type="number"
              min="1"
              max="9999"
@@ -97,7 +101,8 @@
            autoClose="outside"
            class="tc_menuitem">
         <button ngbDropdownToggle
-                class="btn btn-light tc_columnBtn">
+                class="btn btn-light tc_columnBtn"
+                title="toggle columns">
           <i [ngClass]="[icons.large, icons.table]"></i>
         </button>
         <div ngbDropdownMenu>
@@ -128,7 +133,8 @@
       <button type="button"
               [class]="'btn btn-' + status.type"
               [ngbTooltip]="status.msg"
-              (click)="refreshBtn()">
+              (click)="refreshBtn()"
+              title="Refresh">
         <i [ngClass]="[icons.large, icons.refresh]"
            [class.fa-spin]="updating || loadingIndicator"></i>
       </button>
@@ -177,6 +183,17 @@
                  [rowIdentity]="rowIdentity()"
                  [rowHeight]="'auto'">
 
+    <!-- Row Selection Template-->
+    <ng-template #rowSelectionTpl
+                 let-value="value"
+                 let-isSelected="isSelected"
+                 ngx-datatable-cell-template>
+      <input type="checkbox"
+             [attr.aria-label]="isSelected ? 'selected' : 'select'"
+             [checked]="isSelected"
+             class="cd-datatable-checkbox" />
+    </ng-template>
+
     <!-- Row Detail Template -->
     <ngx-datatable-row-detail rowHeight="auto"
                               #detailRow>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 57b8e48de9cd..4762b301ff0d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -264,6 +264,10 @@
 
   .cd-datatable-checkbox {
     text-align: center;
+
+    &:checked {
+      accent-color: vv.$primary;
+    }
   }
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index ddeda9ac4431..e9ff705fa648 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -69,6 +69,8 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
   timeAgoTpl: TemplateRef<any>;
   @ViewChild('rowDetailsTpl', { static: true })
   rowDetailsTpl: TemplateRef<any>;
+  @ViewChild('rowSelectionTpl', { static: true })
+  rowSelectionTpl: TemplateRef<any>;
 
   // This is the array with the items to be shown.
   @Input()
@@ -407,9 +409,10 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
         resizeable: false,
         sortable: false,
         draggable: false,
-        checkboxable: true,
+        checkboxable: false,
         canAutoResize: false,
         cellClass: 'cd-datatable-checkbox',
+        cellTemplate: this.rowSelectionTpl,
         width: 30
       });
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index d4a3d5f86bec..3f982c002b0f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -35,13 +35,14 @@ $dark: #777 !default;
 
 // Extra theme colors.
 $accent: $red !default;
+$accent-wcag-aa-regular-text: #25828e !default;
 $warning-dark: $orange !default;
 
 $fg-color-over-dark-bg: $white !default;
 $fg-hover-color-over-dark-bg: $gray-500 !default;
 
 $theme-colors: (
-  'accent': $accent,
+  'accent': $accent-wcag-aa-regular-text,
   'warning-dark': $warning-dark
 ) !default;