chore(Layout): a11y enhancements for fold button

tolking · Dec 23, 2024 · 4a12972 · 4a12972
1 parent 83a607d
commit 4a12972
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/src/Layout/Layout.ts b/src/Layout/Layout.ts
@@ -9,9 +9,10 @@ import {
   mergeProps,
 } from 'vue'
 import { RouterView, RouteLocationNormalizedLoaded } from 'vue-router'
-import { ElScrollbar, useAttrs } from 'element-plus'
+import { ElScrollbar, useAttrs, useId } from 'element-plus'
 import {
   useCurrentBreakpoint,
+  useLocale,
   useShow,
   useSplitReactive,
 } from '../composables/index'
@@ -36,6 +37,9 @@ export default defineComponent({
     const attrs = useAttrs()
     const breakpoint = useCurrentBreakpoint()
     const { show, toggleShow } = useShow(props.collapse)
+    const { t } = useLocale()
+    const id = useId()
+
     const collapse = computed(() => {
       return breakpoint.value === 'xs' ? false : show.value
     })
@@ -63,8 +67,13 @@ export default defineComponent({
 
     function createMenuButton() {
       return h(
-        'span',
+        'button',
         {
+          type: 'button',
+          ariaDisabled: false,
+          ariaControls: id.value,
+          ariaExpanded: !collapse.value,
+          ariaLabel: t('pro.layout.ariaToggle'),
           class: ['header-fold-btn', collapse.value && 'is-active'],
           onClick: toggleShow,
         },
@@ -79,11 +88,14 @@ export default defineComponent({
     function createAside() {
       return h(
         'aside',
-        { class: ['pro-aside', show.value && 'aside-collapse'] },
+        {
+          id: id.value,
+          class: ['pro-aside', show.value && 'aside-collapse'],
+        },
         [
           h('div', { class: 'mask', onClick: toggleShow }),
           h(
-            'div',
+            'nav',
             {
               class: [
                 'pro-aside-wrapper',

diff --git a/src/locale/en.ts b/src/locale/en.ts
@@ -35,5 +35,8 @@ export default {
       right: 'Close Right',
       others: 'Close Others',
     },
+    layout: {
+      ariaToggle: 'Toggle sidebar menu content',
+    },
   },
 }
diff --git a/src/locale/zh-cn.ts b/src/locale/zh-cn.ts
@@ -35,5 +35,8 @@ export default {
       right: '关闭右侧',
       others: '关闭其他',
     },
+    layout: {
+      ariaToggle: '切换侧边栏菜单内容',
+    },
   },
 }
diff --git a/src/styles/layout.css b/src/styles/layout.css
@@ -140,9 +140,12 @@ body {
       }
       & .header-fold-btn {
         display: inline-block;
-        margin-right: 20px;
+        margin: 0px 20px 0px 0px;
+        padding: 0;
         width: 24px;
         height: 29px;
+        border: 0;
+        background-color: transparent;
         cursor: pointer;
         & .line {
           display: block;