Properly set the Language of Page

dgdavid commented 9 months ago

Since few months ago, Agama allows selecting supported languages for rendering its UI. However, it is not satisfying the Understanding Success Criterion 3.1.1, Language of Page.

In short, it's about reflecting the selecting language by using the lang attribute in the <html> tag, which its useful for

Screen readers can load the correct pronunciation rules. Visual browsers can display characters and scripts correctly. Media players can show captions correctly. As a result, users with disabilities will be better able to understand the content.

To know more, read https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html

Please, note that this attribute it's set in the static src/index.html file, somehow out of the scope of the React application. Something like below could partially fix the issue

diff --git a/web/src/context/installerL10n.jsx b/web/src/context/installerL10n.jsx
index 37aeeb63..a02e5599 100644
--- a/web/src/context/installerL10n.jsx
+++ b/web/src/context/installerL10n.jsx
@@ -243,6 +243,11 @@ function InstallerL10nProvider({ children }) {
       return;
     }

+    const updateLanguage = (language) => {
+      document.querySelector("html").lang = language;
+      setLanguage(language);
+    };
+
     const current = cockpitLanguage();
     const candidateLanguages = [wanted, current].concat(navigatorLanguages()).filter(l => l);
     const newLanguage = findSupportedLanguage(candidateLanguages) || "en-us";
@@ -253,7 +258,7 @@ function InstallerL10nProvider({ children }) {
     if (mustReload) {
       reload(newLanguage);
     } else {
-      setLanguage(newLanguage);
+      updateLanguage(newLanguage);
     }
   }, [storeInstallerLanguage, setLanguage]);

but bear in mind that the application will be rendered with the lang="en" at least once and then switch to the right language. This can probably be changed on the server side by sending an adapted index.html file. In the end, the server already knows which language has been requested.

lslezak commented 9 months ago

I think we should remove the lang="en" flag and set it only dynamically. The official Cockpit plugins also do not set it. https://github.com/cockpit-project/cockpit/blob/main/pkg/users/index.html

Setting on the server side is not possible with the current Cockpit backend, but we could do that with our own server.

dgdavid commented 9 months ago

I think we should remove the lang="en" flag and set it only dynamically.

That was our first though too.

Setting on the server side is not possible with the current Cockpit backend, but we could do that with our own server.

Since we will have our own server, I prefer sending the with the attribute if possible.

agama-project / agama

Properly set the Language of Page #1040