Description
The shell already ships a language selector: LanguageMenu (shell/footer), a dropdown that shows the current language, hides itself when there is only one, and is registered as a widget in the footer's right-hand links slot. Three things keep it from meeting the goals of openedx/public-engineering#558.
Put it in the header
The footer is below whatever the user is doing, and on a course unit or a Studio editing view it is off screen entirely, so a setting that changes every word on the page is effectively hidden. Register the existing component in the header's right-hand slots, on both the desktop and mobile sides so it is present at every viewport, sharing the component rather than copying it so the two placements cannot drift. Keep it a replaceable widget rather than part of the header layout, so operators retain the ability to move or remove it. It can remain in the footer as well; the header is the placement that matters.
Present it as a globe
The control is marked with a globe icon. Next to it, operators choose whether the current language appears as its two-letter code or as its full name, so the label can be matched to the space available and to the audience. Regional locales need the code derived sensibly rather than truncated, since the codes the platform uses are not all two letters. Country flags are not an option, here or as a configurable alternative: a flag names a country, not a language.
Offer the right languages
The list comes from getSupportedLanguageList, which reflects the translations bundled into the application. That is not necessarily the set the LMS will serve, so a user can pick a language, get a translated MFE, and land on a partly untranslated page next. The list needs a source of truth that both agree on, and that reflects what the operator has actually released.
Context
Depends on #283; the selector should call the exported runtime API rather than the footer's private module.
Prior art from the previous header component, proposed but not merged: openedx/frontend-component-header#586
Description
The shell already ships a language selector:
LanguageMenu(shell/footer), a dropdown that shows the current language, hides itself when there is only one, and is registered as a widget in the footer's right-hand links slot. Three things keep it from meeting the goals of openedx/public-engineering#558.Put it in the header
The footer is below whatever the user is doing, and on a course unit or a Studio editing view it is off screen entirely, so a setting that changes every word on the page is effectively hidden. Register the existing component in the header's right-hand slots, on both the desktop and mobile sides so it is present at every viewport, sharing the component rather than copying it so the two placements cannot drift. Keep it a replaceable widget rather than part of the header layout, so operators retain the ability to move or remove it. It can remain in the footer as well; the header is the placement that matters.
Present it as a globe
The control is marked with a globe icon. Next to it, operators choose whether the current language appears as its two-letter code or as its full name, so the label can be matched to the space available and to the audience. Regional locales need the code derived sensibly rather than truncated, since the codes the platform uses are not all two letters. Country flags are not an option, here or as a configurable alternative: a flag names a country, not a language.
Offer the right languages
The list comes from
getSupportedLanguageList, which reflects the translations bundled into the application. That is not necessarily the set the LMS will serve, so a user can pick a language, get a translated MFE, and land on a partly untranslated page next. The list needs a source of truth that both agree on, and that reflects what the operator has actually released.Context
Depends on #283; the selector should call the exported runtime API rather than the footer's private module.
Prior art from the previous header component, proposed but not merged: openedx/frontend-component-header#586