perf(a11y): add aria-label to language button (#2025)

Co-authored-by: Divyansh Singh <[email protected]>

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).

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 })
 </script>
 
@@ -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'"
   >
     <div class="items">
       <p class="title">{{ currentLang.label }}</p>

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.
      */