\n\n\u003Cimg width=\"298\" height=\"300\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/273a285b-18d3-4f36-9322-73976c96a70a\" />\n\n### Expected behavior\n\n1. `lang` attribute (e.g. `lang=zh-CN` or `lang=ja`) is added to one of ancestor tags of each language label\n2. Each han is displayed as the correct/expected form\n\nCorrect:\n\nSet the correct `lang` attribute values to Simplified/Traditional Chinese labels:\n\n\u003Cimg width=\"343\" height=\"719\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4d93fc69-2bd5-45c1-a1ae-ee4c23a14846\" />\n\n↓Note: Japanese \u003Cspan lang=ja>文\u003C/span> is prioritized due to `system-ui` and `ui-sans-serif`, so this is not ideal:\n\n\u003Cimg width=\"247\" height=\"183\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6c24d586-1317-45f5-a355-29cf048206f0\" />\n\n(`sans-serif` instead of them will fix the shape of 文)\n\n### System Info\n\n```Text\nN/A\n```\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3168],{"name":3169,"color":3170},"bug: pending triage","e99695",4927,"Set `lang` attribute to language labels","2025-08-31T14:33:37Z","https://github.com/vuejs/vitepress/issues/4927",0.75901276,{"description":3177,"labels":3178,"number":3181,"owner":3158,"repository":3159,"state":3182,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Describe the bug\n\nI've ran _Crome's Lighthouse_ accessibility audit against the page, and it's failing, for the element marked as: `button.VPSwitch.VPSwitchAppearance` the item was recently reviewed for a11y and code (alpha58) compiles it inside a label.\r\n\r\nLighthouse tests expects the tag button has an [explicit](https://dequeuniversity.com/rules/axe/4.4/button-name) `aria-label` attribute. I can't say if it's false positive but affects the report.\n\n### Reproduction\n\n1. Setup a basic site\r\n2. Open Chrome browser (v.100.x)\r\n3. Open the basic website and browser's console\r\n4. Inside Tab Lighthouse (9.4.0), check Accessibility and Desktop mode radio button \r\n5. Run Generate Report\r\n6. See: warning Buttons do not have an accessible name marked for button.VPSwitch.VPSwitchAppearance\r\n\n\n### Expected behavior\n\nAny warning expected for a11y tests.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz\r\n Memory: 11.43 GB / 12.31 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.15.1/bin/npm\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.58 => 1.0.0-alpha.58\n```\n\n\n### Additional context\n\nrelated to #2080\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3179,3180],{"name":3169,"color":3170},{"name":3155,"color":3156},2096,"closed","Buttons do not have an accessible name","2023-08-12T00:04:27Z","https://github.com/vuejs/vitepress/issues/2096",0.69204354,{"description":3188,"labels":3189,"number":3193,"owner":3158,"repository":3159,"state":3182,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Describe the bug\n\nHere is my configuration\r\nmy website: https://lark-base-team.github.io/js-sdk-docs/\r\n```\r\nimport { defineConfig } from 'vitepress'\r\nimport { getZhSideBar } from './zh-sidebar';\r\nimport { getEnSideBar } from './en-sidebar';\r\n\r\n\r\n// https://vitepress.dev/reference/site-config\r\nexport default defineConfig({\r\n lastUpdated: true,\r\n cleanUrls: true,\r\n base: '/js-sdk-docs/',\r\n themeConfig: {\r\n logo: '/logo.svg',\r\n search: {\r\n provider: 'local'\r\n },\r\n nav: [\r\n { text: 'API', link: '/zh/api/guide', activeMatch: 'zh/api' },\r\n ],\r\n },\r\n head: [\r\n ['link', { rel: 'icon', href: '/js-sdk-docs/logo.svg' }],\r\n ],\r\n title: 'Base JS SDK',\r\n description: 'Base JS SDK Docs',\r\n // sitemap: {\r\n // hostname: 'https://basejsapi.com',\r\n // },\r\n lang: 'zh',\r\n locales: {\r\n zh: {\r\n label: '中文',\r\n lang: 'zh',\r\n dir: '/zh',\r\n title: 'Base JS SDK',\r\n description: 'Base JS SDK Docs',\r\n themeConfig: {\r\n logo: '/logo.svg',\r\n search: {\r\n provider: 'local'\r\n },\r\n nav: [\r\n { text: 'API', link: '/zh/api/guide', activeMatch: 'zh/api' },\r\n ],\r\n\r\n sidebar: getZhSideBar(),\r\n },\r\n },\r\n en: {\r\n label: 'English',\r\n lang: 'en',\r\n dir: '/en',\r\n title: 'Base JS SDK',\r\n description: 'Base JS SDK Docs',\r\n themeConfig: {\r\n logo: '/logo.svg',\r\n search: {\r\n provider: 'local'\r\n },\r\n nav: [\r\n { text: 'API', link: '/en/api/guide.md' },\r\n ],\r\n sidebar: getEnSideBar(),\r\n },\r\n }\r\n },\r\n})\r\n\r\n```\n\n### Reproduction\n\nlike my config\n\n### Expected behavior\n\nI hope to demonstrate the ability to switch languages.\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 13.6\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 208.28 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm\r\n pnpm: 8.7.4 - ~/.nvm/versions/node/v18.14.2/bin/pnpm\r\n Browsers:\r\n Chrome: 118.0.5993.70\r\n Safari: 17.0\r\n npmPackages:\r\n vitepress: 1.0.0-rc.10 => 1.0.0-rc.10\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3190],{"name":3191,"color":3192},"question","5D5FAE",3099,"The homepage lacks the ability to switch languages. ","2023-10-27T00:04:14Z","https://github.com/vuejs/vitepress/issues/3099",0.70393884,{"description":3199,"labels":3200,"number":3207,"owner":3158,"repository":3159,"state":3182,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Is your feature request related to a problem? Please describe.\n\nFind myself wanting to use VPButton and VPSponsors on a few places throughout my site. Right now, I exported them through a patch, but would great if they were exported by default.\n\n### Describe the solution you'd like\n\nVPButton and VPSponsors exported.\n\n### Describe alternatives you've considered\n\nCurrently use the following patch:\r\n\r\n```diff\r\ndiff --git a/dist/client/theme-default/without-fonts.js b/dist/client/theme-default/without-fonts.js\r\nindex 2b760aa398b7ac1881551ab146d7d308ef2277a3..a2940ca0b99b7673d8914e4bf332f57c588e8f46 100644\r\n--- a/dist/client/theme-default/without-fonts.js\r\n+++ b/dist/client/theme-default/without-fonts.js\r\n@@ -11,10 +11,12 @@ import Layout from './Layout.vue';\r\n // Note: if we add more optional components here, i.e. components that are not\r\n // used in the theme by default unless the user imports them, make sure to update\r\n // the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.\r\n+export { default as VPButton } from './components/VPButton.vue';\r\n export { default as VPHomeHero } from './components/VPHomeHero.vue';\r\n export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';\r\n export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';\r\n export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';\r\n+export { default as VPSponsors } from './components/VPSponsors.vue';\r\n export { default as VPTeamPage } from './components/VPTeamPage.vue';\r\n export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';\r\n export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';\r\ndiff --git a/theme.d.ts b/theme.d.ts\r\nindex 4b1076b5fbda893eb6f4a5df6a40c15d1bb379ba..177f5a6aa9602e0eeae954137bcce1ac0080ddef 100644\r\n--- a/theme.d.ts\r\n+++ b/theme.d.ts\r\n@@ -3,10 +3,12 @@ import type { DefineComponent } from 'vue'\r\n import { EnhanceAppContext } from './dist/client/index.js'\r\n \r\n // TODO: add props for these\r\n+export const VPButton: DefineComponent\r\n export const VPHomeHero: DefineComponent\r\n export const VPHomeFeatures: DefineComponent\r\n export const VPHomeSponsors: DefineComponent\r\n export const VPDocAsideSponsors: DefineComponent\r\n+export const VPSponsors: DefineComponent\r\n export const VPTeamPage: DefineComponent\r\n export const VPTeamPageTitle: DefineComponent\r\n export const VPTeamPageSection: DefineComponent\r\n```\n\n### Additional context\n\nHappy to open a PR for this!\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3201,3204],{"name":3202,"color":3203},"theme","0754FB",{"name":3205,"color":3206},"contribution welcome","11E4B8",2765,"Export VPButton + VPSponsors","2023-08-23T00:04:06Z","https://github.com/vuejs/vitepress/issues/2765",0.71136516,{"description":3213,"labels":3214,"number":3215,"owner":3158,"repository":3159,"state":3182,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Is your feature request related to a problem? Please describe.\n\nI currently have a practical requirement to change the background image of the homepage based on the button state with the class \"VPSwitch VPSwitchAppearance\".\r\n\r\nHowever, this button does not have an id attribute or a ref attribute, which forces me to use the `document.querySelector()` method to get this element.\r\n\r\nThis is quite uncomfortable in the Vue3 environment.\n\n### Describe the solution you'd like\n\nGive ref tags to all key elements\n\n### Describe alternatives you've considered\n\nnull\n\n### Additional context\n\n\r\n\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],3574,"Please assign the ref attribute to the key label element.","2024-02-23T00:05:12Z","https://github.com/vuejs/vitepress/issues/3574",0.7324136,{"description":3221,"labels":3222,"number":3225,"owner":3158,"repository":3159,"state":3182,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Describe the bug\n\nRunning firefox's accessibility tests fails on \"toggle dark mode\" switch.\r\nhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names#form_elements_should_have_a_visible_text_label\r\n\r\na11y accessibility wcag\n\n### Reproduction\n\n- build a basic website\r\n- inspect it with the browser's console accessibility tool\n\n### Expected behavior\n\nall form input elements must have a label or attribute `aria-labelled=` with accessible value\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz\r\n Memory: 11.91 GB / 12.31 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.15.1/bin/npm\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.49 => 1.0.0-alpha.49\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3223,3224],{"name":3202,"color":3203},{"name":3152,"color":3153},2080,"form elements must have a visible label","2023-03-22T00:03:24Z","https://github.com/vuejs/vitepress/issues/2080",0.7329157,{"description":3231,"labels":3232,"number":3234,"owner":3158,"repository":3159,"state":3182,"title":3235,"updated_at":3236,"url":3237,"score":3238},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\nNavbar items doesnt change in ssr render.\r\nAnd sidebar doesnt change when build with a site base.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n1. clone this [repo](https://github.com/dewfall123/vitepress-issue-1)\r\n2. run\r\n`yarn`\r\n`yarn build`\r\n`yarn build-dev`\r\n3. open http://127.0.0.1:3002 and switch the language to Chinese.\r\nThe first nav doesnt change to Chinese, witch should be `指南`。\r\n\r\nThe second bug.\r\n1. set a site base.\r\n2. run \r\n`yarn build`\r\n`yarn build-dev`\r\n3. switch the language to Chinese, Sidebar doesnt change.\r\n\r\n**Expected behavior**\r\nNavbar and sidebar should change when switch the language to Chinese.\r\n\r\n**System Info**\r\n- vitepress version: 0.7.0\r\n- vite version: v1.0.0-rc.4\r\n- Node version: 14\r\n- OS version: windows 10\r\n\r\n**Additional context**\r\nI am trying to fix this.\r\n",[3233],{"name":3169,"color":3170},106,"Navbar items doesnt change when switch language","2023-01-21T16:24:22Z","https://github.com/vuejs/vitepress/issues/106",0.73902774,{"description":3240,"labels":3241,"number":3245,"owner":3158,"repository":3159,"state":3182,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Describe the bug\n\n\nThe current implementation of the collapsible **sidebar** navigation uses div elements and custom JavaScript to function as an accordion. This non-semantic approach creates significant accessibility issues.\n\nAssistive technologies, like screen readers, cannot properly interpret the role or state (expanded/collapsed) of these components. This results in a poor user experience for individuals who rely on such technology.\n\nI propose replacing the current div-based implementation with the native HTML \u003Cdetails> and \u003Csummary> elements. This would:\n\nProvide full accessibility out-of-the-box for screen reader and keyboard-only users.\n\nReduce custom JavaScript and engineering complexity by leveraging native browser behavior.\n\nAlign the component with modern web standards and semantic best practices.\n\n\n\n### Reproduction\n\nNavigate to any page in the VitePress documentation that uses a collapsible container, such as the [Vitepress Docs](https://vitepress.dev/guide/what-is-vitepress).\n\n\nAttempt to navigate the **sidebar** with a screen reader (e.g., VoiceOver, NVDA, JAWS). The screen reader fails to announce it as a collapsible element or communicate its state.\n\n### Expected behavior\n\nFor sidebar to look and function exactly as it does now but with better accessibility.\n\n\n### System Info\n\n```Text\nJAWS, NVDA, VOICEOVER\n```\n",[3242],{"name":3243,"color":3244},"need more info","bdbefc",4846,"Bug: Custom Container/Accordion component is not accessible and should use native \u003Cdetails>/\u003Csummary> elements","2025-07-17T06:30:42Z","https://github.com/vuejs/vitepress/issues/4846",0.74084675,{"description":3251,"labels":3252,"number":3254,"owner":3158,"repository":3159,"state":3182,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Describe the bug\n\nWhen I customize a link component and introduce it into vitepress, the `vp-doc` class generates a style override on my custom style, causing my style to not display properly:\r\n\r\nI've tried `vp-raw` for style isolation, but it still doesn't display my custom styles properly\r\n\r\nI don't know how to solve this style override problem, which has been bothering me for a long time\n\n### Reproduction\n\nThis is my custom link component:\r\n```tsx\r\nimport { defineComponent, PropType, ref } from \"vue\";\r\nimport \"uno.css\";\r\n\r\nexport type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'\r\nexport type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'\r\nexport const props = {\r\n type: {\r\n type: String as PropType\u003CIType>,\r\n default: \"default\",\r\n },\r\n color: {\r\n type: String as PropType\u003CIColor>,\r\n default: \"black\",\r\n },\r\n plain: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n href: {\r\n type: String,\r\n required: true,\r\n },\r\n} as const;\r\n\r\nexport default defineComponent({\r\n name: \"CLink\",\r\n props,\r\n setup(props, { slots }) {\r\n return () => (\r\n \u003Ca\r\n class={`\r\n text-${props.plain ? props.color + \"-500\" : \"white\"}\r\n hover:text-${props.color}-400\r\n cursor-pointer\r\n text-lg\r\n hover:text-white\r\n transition duration-300 ease-in-out transform hover:scale-105\r\n mx-1\r\n decoration-none\r\n `}\r\n href={props.href} \r\n >\r\n {slots.default ? slots.default() : 'Link'}\r\n \u003C/a>\r\n ); \r\n },\r\n});\r\n```\r\n\r\nHere's my demo code from the documentation:\r\n```vue\r\n\u003Cdiv class=\"vp-raw\">\r\n \u003CCLink href=\"#\" class=\"primary\" color=\"blue\">Primary Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"success\" color=\"green\">Success Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"warning\" color=\"yellow\">Warning Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"danger\" color=\"red\">Danger Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"info\" color=\"gray\">Info Link\u003C/CLink>\r\n\u003C/div>\r\n```\r\n\r\n\r\n\n\n### Expected behavior\n\nI want to be able to display the style of my components properly, in fact I can be sure that the `vp-doc` generated style override, I delete this class by manipulating the DOM and then the style can be displayed normally, but this will make the other functions of vitepress failure, I want to be able to display the style of the component without affecting vitepress\n\n### System Info\n\n```shell\n{\r\n \"name\": \"catisol-ui\",\r\n \"version\": \"0.9.1\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"vitest\",\r\n \"build\": \"vite build\",\r\n \"dev\": \"vite\",\r\n \"docs:dev\": \"vitepress dev docs\",\r\n \"docs:build\": \"vitepress build docs\",\r\n \"docs:serve\": \"vitepress serve docs\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"devDependencies\": {\r\n \"@iconify-json/ic\": \"1.1.4\",\r\n \"@vitejs/plugin-vue\": \"3.0.3\",\r\n \"@vitejs/plugin-vue-jsx\": \"2.0.0\",\r\n \"@vue/test-utils\": \"2.0.2\",\r\n \"happy-dom\": \"6.0.4\",\r\n \"postcss\": \"^8.4.21\",\r\n \"postcss-prefix-selector\": \"^1.16.0\",\r\n \"unocss\": \"0.45.6\",\r\n \"vite\": \"3.0.7\",\r\n \"vitepress\": \"v1.0.0-alpha.31\",\r\n \"vitest\": \"0.21.1\"\r\n },\r\n \"maintainers\": [\r\n \"isolcat\"\r\n ],\r\n \"dependencies\": {\r\n \"@unocss/vite\": \"^0.45.13\",\r\n \"vue\": \"3.2.37\"\r\n }\r\n}\n```\n\n\n### Additional context\n\n_No response_\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.",[3253],{"name":3243,"color":3244},1777,"vp-raw cannot isolate style conflicts generated by v-doc classes","2023-01-21T14:16:44Z","https://github.com/vuejs/vitepress/issues/1777",0.7484646,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNvOeZ8T73XqUIrg-E3r2KSpcUrKBOUeA0eIOZyDs1ug":-1},"/vuejs/vitepress/2021"]