Skip to content

Commit 35865ec

Browse files
authored
fix: adds accessibility to code-group component (#2630)
1 parent 64e92ca commit 35865ec

File tree

1 file changed

+24
-9
lines changed

1 file changed

+24
-9
lines changed

packages/@vuepress/theme-default/global-components/CodeGroup.vue

+24-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<template>
22
<div class="theme-code-group">
33
<div class="theme-code-group__nav">
4-
<button
5-
v-for="(tab, i) in codeTabs"
6-
:key="tab.title"
7-
class="theme-code-group__nav-tab"
8-
:class="{'theme-code-group__nav-tab-active': i === activeCodeTabIndex}"
9-
@click="changeCodeTab(i)"
10-
>
11-
{{ tab.title }}
12-
</button>
4+
<ul class="theme-code-group__ul">
5+
<li
6+
v-for="(tab, i) in codeTabs"
7+
:key="tab.title"
8+
class="theme-code-group__li"
9+
>
10+
<button
11+
class="theme-code-group__nav-tab"
12+
:class="{
13+
'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
14+
}"
15+
@click="changeCodeTab(i)"
16+
>
17+
{{ tab.title }}
18+
</button>
19+
</li>
20+
</ul>
1321
</div>
1422
<slot />
1523
<pre
@@ -71,6 +79,13 @@ export default {
7179
padding-left: 10px;
7280
padding-top: 10px;
7381
}
82+
.theme-code-group__ul {
83+
margin: auto 0;
84+
padding-left: 0;
85+
display: inline-flex;
86+
list-style: none;
87+
}
88+
.theme-code-group__li {}
7489
.theme-code-group__nav-tab {
7590
border: 0;
7691
padding: 5px;

0 commit comments

Comments
 (0)