From a02967e5dddf2580fc7d59a740b39bfb7dc80250 Mon Sep 17 00:00:00 2001
From: Paul-Van-Uytvinck <47578994+Paul-Van-Uytvinck@users.noreply.github.com>
Date: Fri, 8 Dec 2023 17:42:47 +0100
Subject: [PATCH] Improved credential select form accessibility

Closes #24412

Signed-off-by: Paul Van Uytvinck <paul.van.uytvinck@cern.ch>
Co-authored-by: vanuytvp <paul.vanuytvinck@cern.ch>
---
 .../theme/base/login/select-authenticator.ftl         | 11 ++---------
 .../theme/keycloak/login/resources/css/login.css      |  6 ++++++
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/themes/src/main/resources/theme/base/login/select-authenticator.ftl b/themes/src/main/resources/theme/base/login/select-authenticator.ftl
index 3a73174298..4fbe2d33df 100644
--- a/themes/src/main/resources/theme/base/login/select-authenticator.ftl
+++ b/themes/src/main/resources/theme/base/login/select-authenticator.ftl
@@ -1,12 +1,6 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout displayInfo=false; section>
     <#if section = "header" || section = "show-username">
-        <script type="text/javascript">
-            function fillAndSubmit(authExecId) {
-                document.getElementById('authexec-hidden-input').value = authExecId;
-                document.getElementById('kc-select-credential-form').submit();
-            }
-        </script>
         <#if section = "header">
             ${msg("loginChooseAuthenticator")}
         </#if>
@@ -15,7 +9,7 @@
         <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
             <div class="${properties.kcSelectAuthListClass!}">
                 <#list auth.authenticationSelections as authenticationSelection>
-                    <div class="${properties.kcSelectAuthListItemClass!}" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
+                    <button class="${properties.kcSelectAuthListItemClass!}" type="submit" name="authenticationExecution" value="${authenticationSelection.authExecId}">
 
                         <div class="${properties.kcSelectAuthListItemIconClass!}">
                             <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
@@ -32,9 +26,8 @@
                         <div class="${properties.kcSelectAuthListItemArrowClass!}">
                             <i class="${properties.kcSelectAuthListItemArrowIconClass!}"></i>
                         </div>
-                    </div>
+                    </button>
                 </#list>
-                <input type="hidden" id="authexec-hidden-input" name="authenticationExecution" />
             </div>
         </form>
 
diff --git a/themes/src/main/resources/theme/keycloak/login/resources/css/login.css b/themes/src/main/resources/theme/keycloak/login/resources/css/login.css
index ed313c89cf..3c07848481 100644
--- a/themes/src/main/resources/theme/keycloak/login/resources/css/login.css
+++ b/themes/src/main/resources/theme/keycloak/login/resources/css/login.css
@@ -465,6 +465,12 @@ ul#kc-totp-supported-apps {
     padding-top: 1rem;
     padding-bottom: 1rem;
     cursor: pointer;
+    text-align: left;
+    align-items: unset;
+    background-color: unset;
+    border-right: unset;
+    border-bottom: unset;
+    border-left: unset;
 }
 
 .select-auth-box-parent:hover{