[keycloak-dev] Login theme templates: getting the two-letter code for the page’s current language

Tue Mar 14 10:05:49 EDT 2017

I’m a front-end web developer working on a Keycloak login theme for the UK Home Office.

The root template.ftl file in the base theme does not include a lang attribute on its <html> tag:

    <html xmlns="http://www.w3.org/1999/xhtml" class="${properties.kcHtmlClass!}">

I’m trying to add one, as it’s required by the W3C’s Web Content Accessibility Guidelines (WCAG):

    - https://www.w3.org/TR/WCAG20/#meaning-doc-lang-id
    - https://www.w3.org/TR/WCAG20-TECHS/H57.html

and useful for screen readers:

    - https://www.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/

The value of the attribute should be the ISO 639 code for the main language (e.g. English, Italian) that the page is written in.

I tried getting this from the .locale template variable, but at least on the standalone server (2.5.4), this was always set to en_GB, even when internationalization was enabled and the default language was set to a different language (I tried with Italian).

I can’t see anywhere else to access the language code for the page’s current language.

My current workaround is to loop though locale.supported (if locale is defined), and if a supported locale’s label matches locale.current, grab the first two characters of the kc_locale query string parameter in the supported locale’s URL:

    <#assign LANG_CODE = "en">
    <#if .locale??>
        <#assign LANG_CODE = .locale>
    </#if>
    <#if locale??>
        <#list locale.supported>
            <#items as supportedLocale>
                <#if supportedLocale.label == locale.current>
                    <#if supportedLocale.url?contains("?kc_locale=")>
                        <#assign LANG_CODE = supportedLocale.url?keep_after("?kc_locale=")[0..1]>
                    </#if>
                    <#if supportedLocale.url?contains("&kc_locale=")>
                        <#assign LANG_CODE = supportedLocale.url?keep_after("&kc_locale=")[0..1]>
                    </#if>
                </#if>
            </#items>
        </#list>
    </#if>

    <html xmlns="http://www.w3.org/1999/xhtml" class="${properties.kcHtmlClass!}" lang="${LANG_CODE}">

Obviously this depends on no two locales sharing the same label, and on the first two characters of kc_locale being sufficient.

It would be really useful if language code for the page’s current language were available in a template variable, and if this were used to populate the lang attribute on the HTML tag in the root login template.

Paul Waite
Associate

Transform
60 Great Portland Street
London W1W 7RT

Mobile: +447764 752508
Email: paul.waite at transformuk.com<mailto:paul.waite at transformuk.com>
Web: www.transformUK.com<http://www.transformUK.com>
Follow us on Twitter @TransformUK

Please ensure that any communication with Home Office Digital is via an official account ending with digital.homeoffice.gov.uk or homeoffice.gsi.gov.uk. This email and any files transmitted with it are private and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please return it to the address it came from telling them it is not for you and then delete it from your system. Communications via the digital.homeoffice.gov.uk domain may be automatically logged, monitored and/or recorded for legal purposes. This email message has been swept for computer viruses.