From 776984188fed2f61da588ba0767dcaa859f571d8 Mon Sep 17 00:00:00 2001
From: Jay Linski <jakob.linskeseder@gmail.com>
Date: Tue, 16 May 2023 21:46:36 +0200
Subject: [PATCH] Adhere to HTML standard when using ul-element (#20243)

Closes #20250
---
 .../main/resources/theme/base/login/login.ftl | 20 ++++++++++---------
 .../keycloak/login/resources/css/login.css    |  5 ++++-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/themes/src/main/resources/theme/base/login/login.ftl b/themes/src/main/resources/theme/base/login/login.ftl
index 21f3f9561c..1d78cc41ab 100755
--- a/themes/src/main/resources/theme/base/login/login.ftl
+++ b/themes/src/main/resources/theme/base/login/login.ftl
@@ -87,15 +87,17 @@
 
                 <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
                     <#list social.providers as p>
-                        <a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
-                                type="button" href="${p.loginUrl}">
-                            <#if p.iconClasses?has_content>
-                                <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
-                                <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
-                            <#else>
-                                <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
-                            </#if>
-                        </a>
+                        <li>
+                            <a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
+                                    type="button" href="${p.loginUrl}">
+                                <#if p.iconClasses?has_content>
+                                    <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
+                                    <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
+                                <#else>
+                                    <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
+                                </#if>
+                            </a>
+                        </li>
                     </#list>
                 </ul>
             </div>
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 b4bf8ca540..7ca83002fb 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
@@ -253,6 +253,10 @@ ul#kc-totp-supported-apps {
     margin-top: 20px;
 }
 
+.kc-social-links li {
+    width: 100%;
+}
+
 .kc-social-provider-logo {
     font-size: 23px;
     width: 30px;
@@ -272,7 +276,6 @@ ul#kc-totp-supported-apps {
 
 .kc-social-provider-name {
     position: relative;
-    top: 3px;
 }
 
 .kc-social-icon-text {