From 25b9d010b1528ff1b277b028ed76a7cca3ac507f Mon Sep 17 00:00:00 2001
From: nsedrickm <nsedrick101@gmail.com>
Date: Sat, 23 Jul 2022 19:38:01 +0100
Subject: [PATCH] mgr/dashboard: Improve level A accessibility for progress
 bars

Add titles for usage bars so that they can be picked up by screenreaders

Fixes: https://tracker.ceph.com/issues/56008
Signed-off-by: nsedrickm <nsedrick101@gmail.com>
---
 .../ceph/cephfs/cephfs-detail/cephfs-detail.component.html    | 3 ++-
 .../src/app/ceph/cluster/osd/osd-list/osd-list.component.html | 3 ++-
 .../src/app/ceph/pool/pool-list/pool-list.component.html      | 1 +
 .../app/shared/components/usage-bar/usage-bar.component.html  | 4 ++++
 .../app/shared/components/usage-bar/usage-bar.component.ts    | 2 ++
 .../frontend/src/styles/defaults/_bootstrap-defaults.scss     | 1 +
 6 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
index c1d33d8e0d2..64011a5263e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
@@ -32,7 +32,8 @@
 <ng-template #poolUsageTpl
              let-row="row">
   <cd-usage-bar [total]="row.size"
-                [used]="row.used"></cd-usage-bar>
+                [used]="row.used"
+                [title]="row.pool_name"></cd-usage-bar>
 </ng-template>
 
 <ng-template #activityTmpl
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 afec81d9d19..a3c7ae9b289 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
@@ -86,7 +86,8 @@
 
 <ng-template #osdUsageTpl
              let-row="row">
-  <cd-usage-bar [total]="row.stats.stat_bytes"
+  <cd-usage-bar [title]="'osd ' + row.osd"
+                [total]="row.stats.stat_bytes"
                 [used]="row.stats.stat_bytes_used"
                 [warningThreshold]="osdSettings.nearfull_ratio"
                 [errorThreshold]="osdSettings.full_ratio">
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 bd568a9107e..720559bdb7d 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
@@ -53,6 +53,7 @@
   <cd-usage-bar *ngIf="row.stats?.avail_raw?.latest"
                 [total]="row.stats.bytes_used.latest + row.stats.avail_raw.latest"
                 [used]="row.stats.bytes_used.latest"
+                [title]="row.pool_name"
                 decimals="2">
   </cd-usage-bar>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
index 0602a4e59c8..7068744e9f0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
@@ -17,11 +17,15 @@
   <div class="progress-bar bg-info"
        [ngClass]="{'bg-warning': usedPercentage/100 >= warningThreshold, 'bg-danger': usedPercentage/100 >= errorThreshold}"
        role="progressbar"
+       [attr.aria-label]="{ title }"
+       i18n-aria-label="The title of this usage bar is { title }"
        [style.width]="usedPercentage + '%'">
     <span>{{ usedPercentage | number: '1.0-' + decimals }}%</span>
   </div>
   <div class="progress-bar bg-freespace"
        role="progressbar"
+       [attr.aria-label]="{ title }"
+       i18n-aria-label="The title of this usage bar is { title }"
        [style.width]="freePercentage + '%'">
   </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts
index 203f2c9e05d..4877e891e1f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.ts
@@ -22,6 +22,8 @@ export class UsageBarComponent implements OnChanges {
   decimals = 0;
   @Input()
   calculatePerc = true;
+  @Input()
+  title = $localize`usage`;
 
   usedPercentage: number;
   freePercentage: number;
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 c2f1cf2992e..a4cd2abf24c 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
@@ -104,6 +104,7 @@ $nav-tabs-margin-bottom: 1rem !default;
 
 $tooltip-color: $white !default;
 $tooltip-bg: $body-color !default;
+$tooltip-opacity: 1 !default;
 
 // Misc
 
-- 
2.39.5