Merge pull request #2871 from project-sunbird/release-4.2.0

Issue #SB-25716 fix: accessibility changes - text alternative etc (#2…

ansible/artifacts/sunbird/login/login.ftl

@@ -65,7 +65,7 @@
                     <div class="forgot-password">
                       <#if realm.resetPasswordAllowed>
                         <a id="fgtKeycloakFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:storeLocation(); javascript:makeDivUnclickable(); javascript:storeForgotPasswordLocation(event);" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
-                        <div id="fgtPortalFlow" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:makeDivUnclickable(); javascript:createTelemetryEvent(event); javascript:forgetPassword('/recover/identify/account');">${msg("doForgotPassword")}</div>
+                        <div id="fgtPortalFlow" role="link" class="ui right floated forgetPasswordLink hide" tabindex="1" onclick="javascript:makeDivUnclickable(); javascript:createTelemetryEvent(event); javascript:forgetPassword('/recover/identify/account');">${msg("doForgotPassword")}</div>
                       </#if>
                     </div>
                     </div>
@@ -76,7 +76,7 @@
                   <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
                     <div id="kc-registration" class="field">
                                 <div class="ui content signUpMsg">
-                                    ${msg("noAccount")} <span id="signup" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span>
+                                    ${msg("noAccount")} <span id="signup" role="link" tabindex="0" class="registerLink" onclick=navigate('self')>${msg("registerHere")}</span>
                                 </div>
                     </div>
                   </#if>
@@ -86,14 +86,14 @@
                             <#if realm.password && social.providers??>
                                 <!--div id="kc-social-providers">
                                     <#list social.providers as p>
-                                    <a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} ui fluid blue basic button textCenter">
+                                    <a href="${p.loginUrl}" id="zocial-${p.alias}" aria-label="${msg('doSignIn')} ${msg('doSignWithGoogle')}" class="zocial ${p.providerId} ui fluid blue basic button textCenter">
                                     <i class="icon signInWithGoogle"></i>${msg("doSignIn")} ${msg("doSignWithGoogle")}
                                     </a>
                                     </#list>
                                 </div-->
                             </#if>
-                            <button type="button" class="sb-btn sb-btn-normal sb-btn-primary width-100 mb-16 btn-signInWithGoogle" onclick="navigate('google')">
-                            <img class="signInWithGoogle" src="${url.resourcesPath}/img/google.svg" alt="${msg("signIn")} ${msg("doSignWithGoogle")}">
+                            <button type="button" class="sb-btn sb-btn-normal sb-btn-primary width-100 mb-16 btn-signInWithGoogle" onclick="navigate('google')" aria-label="${msg('signIn')} ${msg('doSignWithGoogle')}">
+                            <img class="signInWithGoogle" alt="${msg('signIn')} ${msg('doSignWithGoogle')}" src="${url.resourcesPath}/img/google.svg" alt="${msg("signIn")} ${msg("doSignWithGoogle")}">
                             ${msg("signIn")} ${msg("doSignWithGoogle")}
                             </button>
                             <button type="button" id="stateButton" class="sb-btn sb-btn-outline-gray sb-btn-normal width-100" onclick="navigate('state')">

ansible/artifacts/sunbird/login/resources/css/login.css

@@ -82,7 +82,7 @@ input:focus{
     color: #F9F9F9;
 }
 .or{
-    color: #333;
+    color: #4E5255;
     background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);
     background-size:45% 1px;
     background-position:center left,center right;
@@ -243,7 +243,7 @@ p.subtitle {
     color: #e55a28;
 }
 .ui.text.error{
-    color:#ff4558;
+    color:#A80011;
     font-size: 14px;
     display: block;
     margin-top: 8px;margin-bottom: 8px;
@@ -625,8 +625,8 @@ h1, h2, h3, h4, h5,
 }
 
 .btn-signInWithGoogle {
-    background: #0b51c1;
-    border: #4285F4;
+    background: #0B51C1;
+    border: #0B51C1;
 }
 /* tab accessibility css fix */
 *:focus-visible{

ansible/artifacts/sunbird/login/template.ftl

@@ -38,7 +38,7 @@
 </head>
 
 <body class="${properties.kcBodyClass!}">
-    <div id="kc-logo"><a href="${properties.kcLogoLink!'#'}"><div id="kc-logo-wrapper"></div><span class="hide">kc-logo</span></a></div>
+    <div id="kc-logo"><a href="${properties.kcLogoLink!'#'}" title="kc-logo-wrapper"><div id="kc-logo-wrapper"></div><span class="hide">kc-logo</span></a></div>
 
     <div id="kc-container" class="${properties.kcContainerClass!}">
         <div id="kc-container-wrapper" class="${properties.kcContainerWrapperClass!}">
@@ -93,7 +93,13 @@
                         var logoImg =  document.querySelector(".ui.header img");
                         if(logoImg){
                             logoImg.setAttribute('class','logo-image');
-                            logoImg.setAttribute('alt',sessionTenant);
+                            if(sessionTenant) {
+                                var logoname = sessionTenant + 'logo';
+                                logoImg.setAttribute('alt',logoname);
+                            } else {
+                                var logoname = 'Sunbird logo';
+                                logoImg.setAttribute('alt',logoname);
+                            }
                             logoImg.src = imgSrc;
                             logoImg.addEventListener("error", ()=>{ logoImg.onerror=null;logoImg.src='${url.resourcesPath}/img/logo.png'});
                         }