feat(theme-classic): use lang attribute in navbar locale dropdown ite…

…ms (#7942)
facebook · Sep 1, 2022 · dbc2c09 · dbc2c09
1 parent fb710b6
commit dbc2c09
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -34,6 +34,7 @@ export default function LocaleDropdownNavbarItem({
     })}`;
     return {
       label: localeConfigs[locale]!.label,
+      lang: localeConfigs[locale]!.htmlLang,
       to,
       target: '_self',
       autoAddBaseUrl: false,

diff --git a/packages/docusaurus-types/src/i18n.d.ts b/packages/docusaurus-types/src/i18n.d.ts
@@ -11,8 +11,9 @@ export type I18nLocaleConfig = {
   /** The label displayed for this locale in the locales dropdown. */
   label: string;
   /**
-   * BCP 47 language tag to use in `<html lang="...">` and in
-   * `<link ... hreflang="...">`
+   * BCP 47 language tag to use in:
+   * - `<html lang="...">` (or any other DOM tag name)
+   * - `<link ... hreflang="...">`
    */
   htmlLang: string;
   /** Used to select the locale's CSS and html meta attribute. */

diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md
@@ -157,7 +157,7 @@ module.exports = {
 - `localeConfigs`: Individual options for each locale.
   - `label`: The label displayed for this locale in the locales dropdown.
   - `direction`: `ltr` (default) or `rtl` (for [right-to-left languages](https://developer.mozilla.org/en-US/docs/Glossary/rtl) like Farsi, Arabic, Hebrew, etc.). Used to select the locale's CSS and HTML meta attribute.
-  - `htmlLang`: BCP 47 language tag to use in `<html lang="...">` and in `<link ... hreflang="...">`
+  - `htmlLang`: BCP 47 language tag to use in `<html lang="...">` (or any other DOM tag name) and in `<link ... hreflang="...">`
   - `calendar`: the [calendar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar) used to calculate the date era. Note that it doesn't control the actual string displayed: `MM/DD/YYYY` and `DD/MM/YYYY` are both `gregory`. To choose the format (`DD/MM/YYYY` or `MM/DD/YYYY`), set your locale name to `en-GB` or `en-US` (`en` means `en-US`).
   - `path`: Root folder that all plugin localization folders of this locale are relative to. Will be resolved against `i18n.path`. Defaults to the locale's name. Note: this has no effect on the locale's `baseUrl`—customization of base URL is a work-in-progress.