\r\n```yaml\r\n // algolia搜索\r\n search: {\r\n provider: 'algolia',\r\n options: {\r\n appId: 'xxxxx',\r\n apiKey: 'xxxxx',\r\n indexName: 'xxxxxx'\r\n }\r\n },",[],2944,"\"Algolia Search\" cannot jump to the page","2023-09-21T00:04:13Z","https://github.com/vuejs/vitepress/issues/2944",0.7443608,{"description":2956,"labels":2957,"number":2959,"owner":2869,"repository":2870,"state":2871,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Describe the bug\n\nThe button in the navigation for switching languages is not accessible for screen reader users.\r\n\r\n\r\n\r\nReviewing the HTML code reveals that property `aria-label` is not provided for the `button` element:\r\n\r\n```html\r\n\u003Cdiv class=\"VPFlyout VPNavBarTranslations translations\">\r\n \u003Cbutton type=\"button\" class=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n \u003Cspan class=\"text\">\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"option-icon\" >\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"text-icon\">\r\n \u003C/span>\r\n \u003C/button>\r\n \u003Cdiv class=\"menu\">\r\n \u003Cdiv class=\"VPMenu\">\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">Deutsch\u003C/p>\r\n \u003Cdiv class=\"VPMenuLink\">\r\n \u003Ca class=\"VPLink link\" href=\"...\">English\u003C/a>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nAs 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.\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nI'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.\r\n\r\nIt seems like setting property `label` for component `VPFlyout` should resolve the issue. However, this value should be configurable for different locales IMO.\r\n\n\n### Reproduction\n\nConfigure 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\").\n\n### Expected behavior\n\nThe `aria-label` property of the `button` element of `VPFlyout` in `VPNavBarTranslations` should be set.\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n :label=\"Switch Language\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nor\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n :label=\"currentLang.languageButtonAriaLabel\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nRelevant HTML code should look like this:\r\n\r\n```html\r\n\u003Cdiv class=\"VPFlyout VPNavBarTranslations translations\">\r\n \u003Cbutton type=\"button\" class=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-label=\"Switch Language\">\r\n \u003Cspan class=\"text\">\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"option-icon\" >\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"text-icon\">\r\n \u003C/span>\r\n \u003C/button>\r\n \u003Cdiv class=\"menu\">\r\n \u003Cdiv class=\"VPMenu\">\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">Deutsch\u003C/p>\r\n \u003Cdiv class=\"VPMenuLink\">\r\n \u003Ca class=\"VPLink link\" href=\"...\">English\u003C/a>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)\r\n CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz\r\n Memory: 22.58 GB / 31.13 GB\r\n Container: Yes\r\n Shell: 5.0.17 - /bin/bash\r\n Binaries:\r\n Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm\r\n Browsers:\r\n Chrome: 110.0.5481.177\r\n Chromium: 110.0.5481.177\r\n Firefox: 110.0.1\n```\n\n\n### Additional context\n\nFollowing website explains the accessibility issue and possible solution in detail: https://dequeuniversity.com/rules/axe/4.4/button-name\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2958],{"name":2866,"color":2867},2021,"'Switch Language' Button does not have an accessible name","2023-03-16T00:04:26Z","https://github.com/vuejs/vitepress/issues/2021",0.75558364,["Reactive",2965],{},["Set"],["ShallowReactive",2968],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fE7WD16D4Lp1CJAiuTPzwXjlh1TRAMVWwmKt2sDRSyH4":-1},"/vuejs/vitepress/796"]