'Switch Language' Button does not have an accessible name

[sabicalija]

Describe the bug

The button in the navigation for switching languages is not accessible for screen reader users.

Reviewing the HTML code reveals that property aria-label is not provided for the button element:

<div class="VPFlyout VPNavBarTranslations translations">
  <button type="button" class="button" aria-haspopup="true" aria-expanded="false">
    <span class="text">
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="option-icon" >
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="text-icon">
    </span>
  </button>
  <div class="menu">
    <div class="VPMenu">
     <div class="items">
        <p class="title">Deutsch</p>
        <div class="VPMenuLink">
          <a class="VPLink link" href="...">English</a>
        </div>
      </div>
    </div>
  </div>
</div>

As far as I can tell, the reason for the missing aria-label property seems to be the missing label property for component VPFlyout.vue in the VPNavBarTranslations.vue component.

<!-- src/client/theme-default/components/VPNavBarTranslations.vue -->
<template>
  <VPFlyout
    v-if="localeLinks.length && currentLang.label"
    class="VPNavBarTranslations"
    :icon="VPIconLanguages"
  >
    <div class="items">
      <p class="title">{{ currentLang.label }}</p>

      <template v-for="locale in localeLinks" :key="locale.link">
        <VPMenuLink :item="locale" />
      </template>
    </div>
  </VPFlyout>
</template>

I'm planning to provide a PR for this issue, if you agree. But I might need some guidance in how to provide the changes properly.

It seems like setting property label for component VPFlyout should resolve the issue. However, this value should be configurable for different locales IMO.

Reproduction

Configure vitepress for 2 locales at least to enable the "Switch Language" button in the navbar. Using a screen reader, the button is not announced properly (e.g. "popup button collapse").

Expected behavior

The aria-label property of the button element of VPFlyout in VPNavBarTranslations should be set.

<!-- src/client/theme-default/components/VPNavBarTranslations.vue -->
<template>
  <VPFlyout
    v-if="localeLinks.length && currentLang.label"
    class="VPNavBarTranslations"
    :icon="VPIconLanguages"
    :label="Switch Language"
  >
    <div class="items">
      <p class="title">{{ currentLang.label }}</p>

      <template v-for="locale in localeLinks" :key="locale.link">
        <VPMenuLink :item="locale" />
      </template>
    </div>
  </VPFlyout>
</template>

or

<!-- src/client/theme-default/components/VPNavBarTranslations.vue -->
<template>
  <VPFlyout
    v-if="localeLinks.length && currentLang.label"
    class="VPNavBarTranslations"
    :icon="VPIconLanguages"
    :label="currentLang.languageButtonAriaLabel"
  >
    <div class="items">
      <p class="title">{{ currentLang.label }}</p>

      <template v-for="locale in localeLinks" :key="locale.link">
        <VPMenuLink :item="locale" />
      </template>
    </div>
  </VPFlyout>
</template>

Relevant HTML code should look like this:

<div class="VPFlyout VPNavBarTranslations translations">
  <button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Switch Language">
    <span class="text">
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="option-icon" >
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="text-icon">
    </span>
  </button>
  <div class="menu">
    <div class="VPMenu">
     <div class="items">
        <p class="title">Deutsch</p>
        <div class="VPMenuLink">
          <a class="VPLink link" href="...">English</a>
        </div>
      </div>
    </div>
  </div>
</div>

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz
    Memory: 22.58 GB / 31.13 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Chromium: 110.0.5481.177
    Firefox: 110.0.1

Additional context

Following website explains the accessibility issue and possible solution in detail: https://dequeuniversity.com/rules/axe/4.4/button-name

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.