MFEs aren't changing html lang attribute

Open Beginner friendly
#745 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
javascript

Research direction

Start in src/i18n/lib.js at the i18n configure function around line 262, and compare the existing handleRtl behavior with the issue's suggested HTML update. Verify the MFE document's html lang attribute changes to the configured locale after loading a non-en-us language; done means the attribute reflects getLocale().

Written by the indexing model from the issue text.

Description

a11y

When loading MFE using a language different than en-us. Eg: change the preferred language on the account MFE.

When we reload any MFE page, the lang html attribute didn't change even the application is translated to that new different language.

I think the MFEs should change the html lang attribute when it has been loaded with different language.

<html lang="en-us" dir="ltr">

Suggested change:

I think that the i18n configure function should change that value.
https://github.com/openedx/frontend-platform/blob/07ee86cf54d26dd1a8a98e24cf1a402e98157f61/src/i18n/lib.js#L262

Create a similar Should have a handleHTMLLang similar to handleRtl function, with code:

globalThis.document.getElementsByTagName('html')[0].setAttribute('lang', getLocale());
Dominant language
JavaScript
Stars
39
Forks
91
Avg merge
2m
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from openedx/frontend-platform

All issues in openedx/frontend-platform

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.