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>
This commit is contained in:
Paul-Van-Uytvinck 2023-12-08 17:42:47 +01:00 committed by GitHub
parent 99d197b309
commit a02967e5dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 9 deletions

View file

@ -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>

View file

@ -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{