allow tab on Show Password (#11812)

Co-authored-by: Kevin Vuong <kevin.vuong@hrsdc-rhdcc.gc>

Author: kevin-vuong99

dojo/static/dojo/css/dojo.css

@@ -1837,6 +1837,14 @@ small {
     min-width:200px;
 }
 
+#toggleBox {
+    background-color: transparent!important;
+    border: none!important;
+    font-weight: bold!important;
+    position: absolute!important;
+    left: 0!important;
+}
+
 .EasyMDEContainer .table {
     width: unset!important;
 }

dojo/static/dojo/js/index.js

@@ -247,11 +247,11 @@ function togglePassVisibility() {
     if (passwdInput.type === "password") {
         passwdInput.type = "text";
         toggleBox.innerHTML = "<i class='fa-solid fa-eye-slash'></i>\
-        <span><b>Hide Password</b></span>";
+        <span>Hide Password</span>";
     } else {
         passwdInput.type = "password";
         toggleBox.innerHTML = "<i class='fa-solid fa-eye'></i>\
-        <span><b>Show Password</b></span>";
+        <span>Show Password</span>";
     }
 }
 

dojo/templates/dojo/login.html

@@ -20,9 +20,11 @@ <h3>{% trans "Login" %}</h3>
             <div class="form-group">
 
                 {% if SHOW_LOGIN_FORM or 'force_login_form' in request.GET %}
-                    <div class="col-sm-offset-1 col-sm-2" id="toggleBox" onclick="togglePassVisibility()">
-                        <i class="fa-solid fa-eye"></i>
-                        <span><b>{% trans "Show Password" %}</b></span>
+                    <div class="col-sm-offset-1 col-sm-2">
+                        <button class="btn" id="toggleBox" onclick="togglePassVisibility()" type="button">
+                            <i class="fa-solid fa-eye"></i>
+                            {% trans "Show Password" %}
+                        </button>
                     </div>
                 {% endif %}