correctly set document language based on the selected locale, fixes #723

README.md

@@ -117,6 +117,7 @@ The following changes are already implemented:
 * 🔧 [Improve user account status toggles](https://github.com/etkecc/synapse-admin/pull/608)
 * 🛡️ [Validate that password is entered upon reactivation of account](https://github.com/etkecc/synapse-admin/pull/609)
 * 🌏 [Add Japanese localization](https://github.com/etkecc/synapse-admin/pull/631)
+* 🗣️ [Correctly set document language based on the selected locale](https://github.com/etkecc/synapse-admin/issues/723)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 

src/components/AdminLayout.tsx

@@ -13,6 +13,7 @@ import {
   useLogout,
   UserMenu,
   useStore,
+  useLocaleState,
 } from "react-admin";
 
 import Footer from "./Footer";
@@ -146,6 +147,12 @@ const AdminMenu = props => {
 };
 
 export const AdminLayout = ({ children }) => {
+  // Set the document language based on the selected locale
+  const [locale, _setLocale] = useLocaleState();
+  useEffect(() => {
+    document.documentElement.lang = locale;
+  }, [locale]);
+
   return (
     <>
       <Layout