Set html lang property and page title in usePrepareTemplate

src/lib/usePrepareTemplate.ts

@@ -1,6 +1,7 @@
 import { useReducer, useEffect } from "react";
 import { headInsert } from "keycloakify/tools/headInsert";
 import { clsx } from "keycloakify/tools/clsx";
+import { assert } from "tsafe/assert";
 
 export function usePrepareTemplate(params: {
     doFetchDefaultThemeResources: boolean;
@@ -8,11 +9,31 @@ export function usePrepareTemplate(params: {
     scripts?: string[];
     htmlClassName: string | undefined;
     bodyClassName: string | undefined;
+    htmlLangProperty?: string | undefined;
+    documentTitle?: string;
 }) {
-    const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName } = params;
+    const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params;
 
     const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
 
+    useEffect(() => {
+        if (htmlLangProperty === undefined) {
+            return;
+        }
+
+        const html = document.querySelector("html");
+        assert(html !== null);
+        html.lang = htmlLangProperty;
+    }, [htmlLangProperty]);
+
+    useEffect(() => {
+        if (documentTitle === undefined) {
+            return;
+        }
+
+        document.title = documentTitle;
+    }, [documentTitle]);
+
     useEffect(() => {
         if (!doFetchDefaultThemeResources) {
             return;

src/login/Template.tsx

@@ -38,15 +38,15 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
             `${url.resourcesPath}/css/login.css`
         ],
         "htmlClassName": getClassName("kcHtmlClass"),
-        "bodyClassName": getClassName("kcBodyClass")
+        "bodyClassName": getClassName("kcBodyClass"),
+        "htmlLangProperty": locale?.currentLanguageTag,
+        "documentTitle": i18n.msgStr("loginTitle", kcContext.realm.displayName)
     });
 
     if (!isReady) {
         return null;
     }
 
-    document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName);
-
     return (
         <div className={getClassName("kcLoginClass")}>
             <div id="kc-header" className={getClassName("kcHeaderClass")}>