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 905aaa96b69be5721fad0edc874f2ce4ab198bbb..ef2a4481dbe25dd9d63dad89e2356022960634a0 100644 (file)
--- 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 f996de72794e9d4cfdee4ad819e16eb4cc8762c8..084b466150a617a1771456b127665c7b0fc7190a 100644 (file)
--- 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 b38477c813733430dc8733df46ffb4899455c500..003996582678f5ae36121f43d08678f23e7230bb 100644 (file)
--- 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 57b8e48de9cd6de1def089c19786806b4efbb257..4762b301ff0dcd5082d7e3bbfb0b725b42259d3d 100644 (file)
--- 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 ddeda9ac44311ee9e13c01a5a26682a792b66f6b..e9ff705fa648a7d3f6bb3f4bab950be91a361671 100644 (file)
--- 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 d4a3d5f86bec7a491a5612b2a01dd911a07c9e45..3f982c002b0fcde04ad12e34c6dced7336b41996 100644 (file)
--- 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;