From 3cbca96def09da4b1c1ab0902c2f8de8893bdd21 Mon Sep 17 00:00:00 2001
From: nsedrickm <nsedrick101@gmail.com>
Date: Thu, 2 Jun 2022 19:27:27 +0100
Subject: [PATCH] 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>
---
 .../src/app/core/auth/login/login.component.html         | 4 +++-
 .../src/app/core/auth/login/login.component.scss         | 2 +-
 .../language-selector/language-selector.component.html   | 9 +++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

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 8565c3615c6ba..5049bd4f4dabe 100644
--- 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 0fdc3c6ba3275..ce8b21cbc7686 100644
--- 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 2ecbbd7cce6df..be98eaa6f949a 100644
--- 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>
-- 
2.39.5