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>
(cherry picked from commit 25b9d010b1528ff1b277b028ed76a7cca3ac507f)

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 c1d33d8e0d243543429364674dfac62cf97ee055..64011a5263e945bce295132b0d6bf865d219655b 100644 (file)
--- 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 5322ddea887208ea8a1ac0c6c7c15cf63865fe01..a3611fe00213b4572d3b43cc77aec6e8040e45f8 100644 (file)
--- 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
@@ -123,7 +123,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 bd568a9107ea03d1a93453e4c51927305106bc59..720559bdb7d838e38e912441228b6e1f64e6355e 100644 (file)
--- 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 0602a4e59c8220a34efd6be3e43b08340d03d7b2..7068744e9f02882f04fa79c36a8d13371d58ad54 100644 (file)
--- 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 203f2c9e05d962b5fe7d8243ac24bc35e9d68f8f..4877e891e1f124d015b47430e7eff0226c8f13a7 100644 (file)
--- 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 c2f1cf2992e15048ffced6ec5ff4ae80604cedc8..a4cd2abf24c403433e3c8c405623ed384654da15 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
@@ -104,6 +104,7 @@ $nav-tabs-margin-bottom: 1rem !default;
 
 $tooltip-color: $white !default;
 $tooltip-bg: $body-color !default;
+$tooltip-opacity: 1 !default;
 
 // Misc