Redesign identity provider buttons on the login page#50993
Conversation
Unreported flaky test detectedIf the flaky tests below are affected by the changes, please review and update the changes accordingly. Otherwise, a maintainer should report the flaky tests prior to merging the PR. org.keycloak.testsuite.oauth.ClientAuthPostMethodTest#testPostAuthenticationNotAllowedWhenBasicRequestedorg.keycloak.testsuite.oauth.ClientAuthPostMethodTest#testBasicAuthenticationNotAllowedWhenPostRequestedorg.keycloak.testsuite.forms.MultipleTabsLoginTest#multipleTabsParallelLoginTestWithAuthSessionExpiredAndRequiredActionKeycloak CI - Forms IT (chrome) org.keycloak.testsuite.forms.MultipleTabsLoginTest#multipleTabsParallelLoginTestWithAuthSessionExpiredAndRegisterClickKeycloak CI - Forms IT (chrome) org.keycloak.testsuite.forms.BrowserFlowTest#testUserWithOneAdditionalFactorOtpSuccess |
There was a problem hiding this comment.
Pull request overview
Redesigns Keycloak v2 login-page identity provider buttons with branded icons, clearer labels, and improved layout.
Changes:
- Adds branded SVG assets with dark-mode variants.
- Updates provider layout, divider, labels, and styling.
- Updates tests, release notes, and migration guidance.
Reviewed changes
Copilot reviewed 8 out of 25 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
themes/.../login/theme.properties |
Updates button and divider classes. |
themes/.../login/social-providers.ftl |
Refactors provider rendering and labels. |
themes/.../social/twitter.svg |
Adds Twitter/X icon. |
themes/.../social/twitter-light.svg |
Adds dark-mode Twitter/X icon. |
themes/.../social/stackoverflow.svg |
Adds Stack Overflow icon. |
themes/.../social/paypal.svg |
Adds PayPal icon. |
themes/.../social/openshift-v4.svg |
Adds OpenShift icon. |
themes/.../social/microsoft.svg |
Adds Microsoft icon. |
themes/.../social/linkedin-openid-connect.svg |
Adds LinkedIn icon. |
themes/.../social/instagram.svg |
Adds Instagram icon. |
themes/.../social/instagram-light.svg |
Adds dark-mode Instagram icon. |
themes/.../social/google.svg |
Adds Google icon. |
themes/.../social/gitlab.svg |
Adds GitLab icon. |
themes/.../social/github.svg |
Adds GitHub icon. |
themes/.../social/github-light.svg |
Adds dark-mode GitHub icon. |
themes/.../social/facebook.svg |
Adds Facebook icon. |
themes/.../social/default.svg |
Adds default provider icon. |
themes/.../social/default-light.svg |
Adds dark-mode default icon. |
themes/.../social/bitbucket.svg |
Adds Bitbucket icon. |
themes/.../resources/css/styles.css |
Styles icons, buttons, and divider. |
themes/.../messages/messages_en.properties |
Adds improved provider labels. |
tests/base/.../LoginPageTest.java |
Updates expected button text. |
docs/.../changes-26_8_0.adoc |
Documents migration impact. |
docs/.../topics/26_8_0.adoc |
Adds release notes. |
docs/.../release_notes/index.adoc |
Includes the 26.8 release notes. |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 25 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl:24
- The anchor's existing
aria-labelstill exposes only the provider name, overriding this new descriptive visible label for assistive technologies. Use the translated “Sign in with …” text for the anchor's accessible name as well.
${msg("signInWithProvider", p.displayName!)}
Closes keycloak#50992 Signed-off-by: Martin Bartoš <mabartos@redhat.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 25 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl:17
- With more than three providers, this sets each link's accessible name to only the provider name, so screen-reader users do not get the new “Sign in with …” action conveyed by the button. Keep the compact visible grid label if needed, but always use the descriptive localized label for
aria-label.
class="${properties.kcFormSocialAccountListButtonClass!}" aria-label="<#if useGrid>${p.displayName!}<#else>${msg("signInWithProvider", p.displayName!)}</#if>"
Unreported flaky test detectedIf the flaky tests below are affected by the changes, please review and update the changes accordingly. Otherwise, a maintainer should report the flaky tests prior to merging the PR. org.keycloak.testsuite.forms.BruteForceTest#testExceedMaxTemporaryLockouts |
1 similar comment
Unreported flaky test detectedIf the flaky tests below are affected by the changes, please review and update the changes accordingly. Otherwise, a maintainer should report the flaky tests prior to merging the PR. org.keycloak.testsuite.forms.BruteForceTest#testExceedMaxTemporaryLockouts |
Old vs. New (dark)
Old vs. New (light)
Ligth/dark icons are properly exchanged when OS mode is changed
Screencast.From.2026-07-22.13-12-43.mp4