fix(theme-default): code group accessibility (#10)

vuepress · Dec 31, 2023 · aae5916 · aae5916
1 parent ac40dec
commit aae5916
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 44 deletions.
diff --git a/themes/theme-default/src/client/components/global/CodeGroup.ts b/themes/theme-default/src/client/components/global/CodeGroup.ts
@@ -128,38 +128,29 @@ export const CodeGroup = defineComponent({
       return h('div', { class: 'code-group' }, [
         h(
           'div',
-          { class: 'code-group__nav' },
-          h(
-            'ul',
-            { class: 'code-group__ul' },
-            items.map((vnode, i) => {
-              const isActive = i === activeIndex.value
-
-              return h(
-                'li',
-                { class: 'code-group__li' },
-                h(
-                  'button',
-                  {
-                    ref: (element) => {
-                      if (element) {
-                        tabRefs.value[i] = element as HTMLButtonElement
-                      }
-                    },
-                    class: {
-                      'code-group__nav-tab': true,
-                      'code-group__nav-tab-active': isActive,
-                    },
-                    ariaPressed: isActive,
-                    ariaExpanded: isActive,
-                    onClick: () => (activeIndex.value = i),
-                    onKeydown: (e) => keyboardHandler(e, i),
-                  },
-                  vnode.props.title,
-                ),
-              )
-            }),
-          ),
+          { class: 'code-group__nav', role: 'tablist' },
+          items.map((vnode, i) => {
+            const isActive = i === activeIndex.value
+            return h(
+              'button',
+              {
+                ref: (element) => {
+                  if (element) {
+                    tabRefs.value[i] = element as HTMLButtonElement
+                  }
+                },
+                class: {
+                  'code-group__nav-tab': true,
+                  'code-group__nav-tab-active': isActive,
+                },
+                role: 'tab',
+                ariaSelected: isActive,
+                onClick: () => (activeIndex.value = i),
+                onKeydown: (e) => keyboardHandler(e, i),
+              },
+              vnode.props.title,
+            )
+          }),
         ),
         items,
       ])

diff --git a/themes/theme-default/src/client/components/global/CodeGroupItem.vue b/themes/theme-default/src/client/components/global/CodeGroupItem.vue
@@ -20,7 +20,7 @@ defineProps({
   <div
     class="code-group-item"
     :class="{ 'code-group-item__active': active }"
-    :aria-selected="active"
+    role="tabpanel"
   >
     <slot />
   </div>

diff --git a/themes/theme-default/src/client/styles/code-group.scss b/themes/theme-default/src/client/styles/code-group.scss
@@ -12,14 +12,7 @@
   padding-top: 10px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  background-color: var(--code-bg-color);
-}
-
-.code-group__ul {
-  margin: auto 0;
-  padding-left: 0;
-  display: inline-flex;
-  list-style: none;
+  background-color: var(--c-code-group-tab-bg);
 }
 
 .code-group__nav-tab {
@@ -29,7 +22,7 @@
   background-color: transparent;
   font-size: 0.85em;
   line-height: 1.4;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--c-code-group-tab-title);
   font-weight: 600;
 }
 
@@ -38,11 +31,11 @@
 }
 
 .code-group__nav-tab:focus-visible {
-  outline: 1px solid rgba(255, 255, 255, 0.9);
+  outline: 1px solid var(--c-code-group-tab-outline);
 }
 
 .code-group__nav-tab-active {
-  border-bottom: var(--c-brand) 1px solid;
+  border-bottom: var(--c-code-group-tab-active-border) 1px solid;
 }
 
 @media (max-width: $MQMobileNarrow) {

diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
@@ -62,6 +62,12 @@
   --c-badge-danger: #dc2626;
   --c-badge-danger-text: var(--c-bg);
 
+  // code group colors
+  --c-code-group-tab-title: rgba(255, 255, 255, 0.9);
+  --c-code-group-tab-bg: var(--code-bg-color);
+  --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
+  --c-code-group-tab-active-border: var(--c-brand);
+
   // transition vars
   --t-color: 0.3s ease;
   --t-transform: 0.3s ease;