mgr/dashboard: Improve level A accessibility for buttons

Add titles and aria-labels for icon only buttons so that they can be detected by screen readers

Fixes: https://tracker.ceph.com/issues/56018
Signed-off-by: nsedrickm <nsedrick101@gmail.com>
(cherry picked from commit 5458e1a020fb5d0fe3ae77155c79cd53783a1c8a)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
index 9cdfab939cc2aa529b97a0efd4fe1d744c91f0fa..2d2f13c6b9e950994d1901ed65263a89b0bec8ee 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
@@ -20,7 +20,8 @@
           <div class="input-group-append">
             <button class="btn btn-light"
                     id="editSiteName"
-                    (click)="updateSiteName()">
+                    (click)="updateSiteName()"
+                    [attr.title]="editing ? 'Save' : 'Edit'">
               <i [ngClass]="icons.edit"
                  *ngIf="!editing"></i>
               <i [ngClass]="icons.check"

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 d5c73eb73904a198f8e66319ad2abefbd17fb544..5c84673698a00c3052bf634e004f27e5c02d59f9 100644 (file)
--- 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
@@ -120,7 +120,8 @@
         <div class="input-group-append">
           <button type="button"
                   class="btn btn-light"
-                  (click)="clearSearchKey()">
+                  (click)="clearSearchKey()"
+                  title="Clear">
             <i class="icon-prepend {{ icons.destroy }}"></i>
           </button>
         </div>
@@ -143,7 +144,8 @@
         <span class="input-group-append">
           <button type="button"
                   class="btn btn-light"
-                  (click)="clearDate()">
+                  (click)="clearDate()"
+                  title="Clear">
             <i class="icon-prepend {{ icons.destroy }}"></i>
           </button>
         </span>