\r\n title: Feature A\r\n details: Lorem ipsum dolor sit amet, consectetur adipiscing elit\r\n```\r\n\r\nCheck the feature icon type\r\n```ts\r\ntype FeatureIcon =\r\n | string\r\n | { src: string; alt?: string; width?: string; height: string }\r\n | {\r\n light: string\r\n dark: string\r\n alt?: string\r\n width?: string\r\n height: string\r\n }\r\n```\r\n\r\nI refer to the render logic, use `v-html` render the icon.\r\nDisplay well in `dev` environment, but shows errors in `prod` environment.\r\n\r\n| dev | build |\r\n| ----------- | ----------- |\r\n|  |  |\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/zyyv/vitepress-unocss-issue\r\n\r\n- Display right run `pnpm dev`\r\n- Display error run `pnpm build && pnpm preview`\r\n\r\n### Expected behavior\r\n\r\nDev and build behave the same\r\n\r\n### System Info\r\n\r\n```Text\r\nlatest\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2905,2908,2911],{"name":2906,"color":2907},"build","377ba8",{"name":2909,"color":2910},"has-workaround","1B4515",{"name":2869,"color":2870},4045,"SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.7632836,{"description":2918,"labels":2919,"number":2924,"owner":2872,"repository":2873,"state":2925,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### 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.",[2920,2923],{"name":2921,"color":2922},"bug: pending triage","e99695",{"name":2869,"color":2870},2096,"closed","Buttons do not have an accessible name","2023-08-12T00:04:27Z","https://github.com/vuejs/vitepress/issues/2096",0.6892901,{"description":2931,"labels":2932,"number":2934,"owner":2872,"repository":2873,"state":2925,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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.",[2933],{"name":2883,"color":2884},2021,"'Switch Language' Button does not have an accessible name","2023-03-16T00:04:26Z","https://github.com/vuejs/vitepress/issues/2021",0.7244188,{"description":2940,"labels":2941,"number":2943,"owner":2872,"repository":2873,"state":2925,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Is your feature request related to a problem? Please describe.\r\n\r\nYes, when I verify my documentation site at https://agnosticui.com/ with the [IBM Equal Access Accessibility Checker](https://chrome.google.com/webstore/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp?hl=en-US) it fails hard. This is unfortunate, because one of the things I'm trying to point out is that the UI component library offered is accessible. I lose credibility if the documentation site itself is not a11y compliant.\r\n\r\nI actually get even worse results when I scan the vitepress docs themselves. So while this is a feature request, I would also call it a bug. Lighthouse which I would call more permissive also shows errors in the Accessibility category (but if the IBM checker passes Lighthouse will too).\r\n\r\n### Describe the solution you'd like\r\n\r\nEnsure the code produced by Vitepress is a11y compliant.\r\n\r\nI saw violations with the following rules which can easily be cross-referenced at:\r\nhttps://www.ibm.com/able/requirements/requirements\r\n\r\n1.3.1 Info and Relationships\r\n1.4.3 Contrast (Minimum)\r\n2.4.1 Bypass Blocks\r\n2.5.3 Label in Name\r\n4.1.2 Name, Role, Value\r\n\r\n_Note: this is only from scanning the top-level page. I saw a couple of other warnings on other pages, but this is a good start._\r\n\r\n### Describe alternatives you've considered\r\n\r\nThere are no alternatives. These issues are making Vitepress generated sites less inclusive than they could be meaning certain site users are being excluded which is a real bummer since Vitepress is otherwise producing such lovely sites.\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2942],{"name":2883,"color":2884},466,"Make Vitepress Accessible","2023-02-04T00:04:08Z","https://github.com/vuejs/vitepress/issues/466",0.7368531,{"description":2949,"labels":2950,"number":2952,"owner":2872,"repository":2873,"state":2925,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Describe the bug\n\nWhy did I encounter Element is missing end tag? I can't understand this error\r\n\r\n\r\n\r\n\r\n```html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml>\r\n \u003Chead lang=\"en\">\r\n \u003Cmeta charset=\"UTF-8\" />\r\n \u003Ctitle>\u003C/title>\r\n \u003Cstyle>\r\n /*申明字体*/\r\n @font-face {\r\n font-family: \"iconfont\";\r\n src: url(\"font/iconfont.eot\"); /* IE9*/\r\n src: url(\"font/iconfont.eot?#iefix\") format(\"embedded-opentype\"), /* IE6-IE8 */\r\n url(\"font/iconfont.woff\") format(\"woff\"),\r\n /* chrome、firefox */ url(\"font/iconfont.ttf\") format(\"truetype\"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/\r\n url(\"font/iconfont.svg#iconfont\") format(\"svg\"); /* iOS 4.1- */\r\n }\r\n\r\n p {\r\n width: 200px;\r\n border: 1px solid #000;\r\n line-height: 60px;\r\n font-size: 30px;\r\n margin: 100px auto;\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .icon::before {\r\n content: \"\\e628\";\r\n font-family: iconfont;\r\n color: red;\r\n }\r\n\r\n span {\r\n position: relative;\r\n }\r\n \u003C/style>\r\n \u003C/head>\r\n \u003Cbody>\r\n \u003Cp class=\"icon\">扫码付款\u003C/p>\r\n \u003Cspan class=\"icon\">我是span\u003C/span>\r\n \u003Cdiv class=\"icon\">divvvvvvvvvvv\u003C/div>\r\n \u003C/body>\r\n\u003C/html>\r\n```\r\nIf this is a markdown verification error, can we make Vitepress more compatible with this type of error, or can we have a switch to enable this function\n\n### Reproduction\n\nnothing\n\n### Expected behavior\n\nsucceeful build\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz\r\n Memory: 2.88 GB / 15.85 GB\r\n Binaries:\r\n Node: 18.20.3 - C:\\Program Files\\nodejs\\node.EXE \r\n Yarn: 1.22.22 - ~\\AppData\\Roaming\\npm\\yarn.CMD \r\n npm: 10.7.0 - C:\\Program Files\\nodejs\\npm.CMD \r\n pnpm: 8.15.7 - C:\\Program Files\\nodejs\\pnpm.CMD \r\n bun: 1.1.21 - ~\\.bun\\bin\\bun.EXE\r\n Browsers:\r\n Chrome: 128.0.6613.120\r\n Edge: Chromium (127.0.2651.74)\r\n Internet Explorer: 11.0.19041.4355\r\n npmPackages:\r\n vitepress: ^1.3.1 => 1.3.1\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.",[2951],{"name":2921,"color":2922},4188,"Element is missing end tag.","2024-09-16T04:43:59Z","https://github.com/vuejs/vitepress/issues/4188",0.7441822,{"description":2958,"labels":2959,"number":2961,"owner":2872,"repository":2873,"state":2925,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Describe the bug\n\n1. 组件中 style scoped 使用了 bootstrap,某些 class 样式出不来,比如下面 `rounded`;\r\n\r\n\r\n2. 如果在 vue 组件的 script 导入 bootstrap,则会影响默认主题的样式,比如下面标题\r\n\r\n\r\n3. 不管是使用 slots 还是使用全局注册组件,都是一样的问题;\n\n### Reproduction\n\n默认主题结合 bootstrap 很容易重现。\n\n### Expected behavior\n\n我希望在 vitepress 的组件中使用 bootstrap 快速开发。\n\n### System Info\n\n```sh\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz\r\n Memory: 4.30 GB / 7.72 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node\r\n npm: 9.6.4 - ~/.nvm/versions/node/v19.5.0/bin/npm\r\n pnpm: 8.6.9 - ~/.local/share/pnpm/pnpm\r\n npmPackages:\r\n vitepress: 1.0.0-beta.6 => 1.0.0-beta.6\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.",[2960],{"name":2883,"color":2884},2683,"默认主题添加组件使用 bootstrap 样式没有预期","2023-08-18T00:04:15Z","https://github.com/vuejs/vitepress/issues/2683",0.7445949,{"description":2967,"labels":2968,"number":2970,"owner":2872,"repository":2873,"state":2925,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Describe the bug\n\nts Symbol error:\r\n\r\nPartial\u003CT>\n\n### Reproduction\n\nPartial\u003CT>\n\n### Expected behavior\n\nPartial\u003CT> is OK\n\n### System Info\n\n```sh\nSystem:\r\n OS: macOS 14.0\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 334.34 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.4.1 - ~/.nvm/versions/node/v19.5.0/bin/npm\r\n pnpm: 8.6.12 - ~/.nvm/versions/node/v19.5.0/bin/pnpm\r\n Browsers:\r\n Chrome: 115.0.5790.170\r\n Safari: 17.0\r\n npmPackages:\r\n vitepress: 1.0.0-beta.7 => 1.0.0-beta.7\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.",[2969],{"name":2921,"color":2922},2764,"Element is missing end tag","2023-08-17T00:04:09Z","https://github.com/vuejs/vitepress/issues/2764",0.74782294,["Reactive",2976],{},["Set"],["ShallowReactive",2979],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFAsYcZKPY7dHOvLUKdPrID5XAAQ3gw4rMQWrdUIE8HM":-1},"/vuejs/vitepress/2080"]