diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md index 1761158f..6850f5a1 100644 --- a/docs/reference/default-theme-config.md +++ b/docs/reference/default-theme-config.md @@ -389,4 +389,11 @@ Can be used to customize the sidebar menu label. This label is only displayed in - Type: `string` - Default: `Return to top` -Can be used to customize the label of the returnToTop. This label is only displayed in the mobile view. +Can be used to customize the label of the return to top button. This label is only displayed in the mobile view. + +## langMenuLabel + +- Type: `string` +- Default: `Change language` + +Can be used to customize the aria-label of the language toggle button in navbar. This is only used if you're using [i18n](../guide/i18n). diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue index a184d284..3531e863 100644 --- a/src/client/theme-default/components/VPNavBarTranslations.vue +++ b/src/client/theme-default/components/VPNavBarTranslations.vue @@ -2,8 +2,10 @@ import VPIconLanguages from './icons/VPIconLanguages.vue' import VPFlyout from './VPFlyout.vue' import VPMenuLink from './VPMenuLink.vue' +import { useData } from '../composables/data.js' import { useLangs } from '../composables/langs.js' +const { theme } = useData() const { localeLinks, currentLang } = useLangs({ correspondingLink: true }) @@ -12,6 +14,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true }) v-if="localeLinks.length && currentLang.label" class="VPNavBarTranslations" :icon="VPIconLanguages" + :label="theme.langMenuLabel || 'Change language'" >

{{ currentLang.label }}

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts index abb8e81a..7abab0b6 100644 --- a/types/default-theme.d.ts +++ b/types/default-theme.d.ts @@ -98,6 +98,13 @@ export namespace DefaultTheme { */ returnToTopLabel?: string + /** + * Set custom `aria-label` for language menu button. + * + * @default 'Change language' + */ + langMenuLabel?: string + /** * The algolia options. Leave it undefined to disable the search feature. */