mgr/dashboard: improve accessibility of login page

This commit improves the accessibility of the login page we:
* Made form labels more legible by changing their color to lighter gray
* Added accessible names and roles for password toggle button and language select dropdown

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
index 8565c3615c6bab9dc23ee1642c78214eeb258afe..5049bd4f4dabe30e2f25e8f4dd6c8231689b5c48 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
@@ -1,5 +1,6 @@
 <div class="container"
      *ngIf="isLoginActive">
+  <h1 class="sr-only">Ceph login</h1>
   <form name="loginForm"
         (ngSubmit)="login()"
         #loginForm="ngForm"
@@ -49,7 +50,8 @@
         <span class="form-group-append">
           <button type="button"
                   class="btn btn-outline-light btn-password h-100 px-4"
-                  cdPasswordButton="password">
+                  cdPasswordButton="password"
+                  aria-label="toggle-password">
           </button>
         </span>
       </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
index 0fdc3c6ba3275c5d917bc9ae46b0f7ca142ae15a..ce8b21cbc7686bbba02f498fafe543c5cedf247b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -28,7 +28,7 @@ $dark-secondary: darken(vv.$secondary, 4%);
   }
 
   .placeholder {
-    color: vv.$gray-600;
+    color: vv.$gray-500;
   }
 
   .btn-password:focus {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
index 2ecbbd7cce6df14bd1aa1b16d11d1aa5a9b278f7..be98eaa6f949a05a0c426ae83c6c2a6746667174 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
@@ -3,12 +3,17 @@
      placement="bottom-right">
   <a ngbDropdownToggle
      i18n-title
-     title="Select a Language">
+     id="toggle-language-button"
+     title="Select a Language"
+     role="button">
     {{ allLanguages[selectedLanguage] }}
   </a>
-  <div ngbDropdownMenu>
+  <div ngbDropdownMenu
+       role="listbox"
+       aria-labelledby="toggle-language-button">
     <ng-container *ngFor="let lang of supportedLanguages | keyvalue">
       <button ngbDropdownItem
+              role="option"
               (click)="changeLanguage(lang.key)">
         {{ lang.value }}
       </button>