Login-page a11y improvements

[pkeuter]

Closes #27190

Changes:

• Improved order of tabindexes to avoid jumping
• Set autocomplete to username and current-password for the respective fields
• Switched h4 to h2 to conform to spec (see a11y improvements on login page #27190)
• Added h2 styling to keycloak theme to let the h2 visually stay the same as the h4
• Made the language selector keyboard-accessible by using the specification from https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/ (the script from here is licensed by the W3C license. The file is not modified, and placed as-is with copyright notice.

[pkeuter]

Thanks for the review @jonkoops. Like I said in the PR-description, this is a script from W3C, which is now placed in this repo without any modifications. If you want all these changes, I think it is better to rewrite from scratch. But to be honest, treating this as a library-file is not so bad, is it?

It's your choice obviously but I am not sure if I have the time currently to rewrite this file. Is there another way to incorporate this as a library file?

[jonkoops]

If we are going to check something in it will have to be up to our code standards. If it is a library available on NPM it can be included as a 'common' package, which can be installed here.

[pkeuter]

Thanks for your reply @jonkoops. Other scripts, like https://github.com/keycloak/keycloak/blob/main/themes/src/main/resources/theme/base/login/resources/js/base64url.js are also committed using functions that do not use the standards of Keycloak since they are just used as a library (I assume):

// for embedded scripts, quoted and modified from https://github.com/swansontec/rfc4648.js by William Swanson.

Can't we commit this file in the same fashion?

[jonkoops]

Other scripts, like base64url.js are also committed using functions that do not use the standards of Keycloak since they are just used as a library.

Yes, this is true as in this case this is being refactored in another PR (#27239) to match our code conventions. The convention generally is:

• If it is on NPM, and distributed in the ECMAScript module format, install it through NPM and include it on the page.
• If it does not meet these conditions, relevant parts may be included as files in source, refactored to meet Keycloak standards.

[pkeuter]

Thanks, I will try to find a moment to refactor then. I think this PR brings some useful accessibility fixes to the login-page.

[jonkoops]

I think this PR brings some useful accessibility fixes to the login-page.

For sure, would love to land this!

[pkeuter]

@jonkoops I think I have now implemented all your suggested changes. Please let me know if everything is okay now.

[jonkoops]

One small nit, otherwise LGTM

[jonkoops]

@pkeuter Just FYI, we're developing a new login theme based on PatternFly 5, you might want to backport your efforts there as well.

[pkeuter]

@pkeuter Just FYI, we're developing a new login theme based on PatternFly 5, you might want to backport your efforts there as well.

That's good to know. I'll look into that later.

[ahus1]

approving as of @jonkoops's review.

[jonkoops]

The FIPS test failures are unrelated, we'll have to a rebase after those have been fixed under #27346