Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Properly set the Language of Page #1040

Open
dgdavid opened this issue Feb 15, 2024 · 2 comments
Open

Properly set the Language of Page #1040

dgdavid opened this issue Feb 15, 2024 · 2 comments

Comments

@dgdavid
Copy link
Contributor

dgdavid commented Feb 15, 2024 •
edited by imobachgs

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
Copy link
Member

lslezak commented Feb 15, 2024

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
Copy link
Contributor Author

dgdavid commented Feb 15, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lslezak @dgdavid