feat: a11y 增强

mark9804 · Nov 27, 2024 · 951300f · 951300f
1 parent 3cf4ea9
commit 951300f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElyButton.vue b/docs/.vitepress/theme/components/ElysiumUI/ElyButton.vue
@@ -53,6 +53,8 @@ const buttonTag = computed(() => (isLink.value ? "a" : "button"));
     :href="isLink ? props.href : null"
     @click="handleClick"
     tabindex="0"
+    role="button"
+    aria-label="按钮"
   >
     <span v-if="loading" class="ely-button__loading">
       <span class="loading-spinner"></span>

diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElyProfile.vue b/docs/.vitepress/theme/components/ElysiumUI/ElyProfile.vue
@@ -108,7 +108,7 @@ function handleScrollIndicatorClick() {
 
 <template>
   <div
-    aria-label="User profile"
+    aria-label="用户信息"
     class="ely-profile w-full relative flex flex-col items-center absolute top-0 left-0 select-none"
   >
     <canvas

diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElySpace.vue b/docs/.vitepress/theme/components/ElysiumUI/ElySpace.vue
@@ -98,6 +98,7 @@ const SpaceElement = () => {
               (!!props.divider ? (
                 <span
                   role="separator"
+                  aria-label="分隔符"
                   class="elysium-ui elysium-ui__space--built-in-divider select-none"
                 >
                   {props.divider}

diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElyTag.vue b/docs/.vitepress/theme/components/ElysiumUI/ElyTag.vue
@@ -59,6 +59,7 @@ const handleClose = (e: Event) => {
 <template>
   <span
     :class="classes"
+    :role="props.clickable ? 'button' : null"
     @click="handleClick"
     :tabindex="!props.disabled && props.clickable ? 0 : -1"
     @keydown.space.prevent="handleClick"
@@ -72,7 +73,13 @@ const handleClose = (e: Event) => {
     <span class="elysium-ui__tag--content font-bold">
       <slot></slot>
     </span>
-    <span v-if="closable" class="elysium-ui__tag--close" @click="handleClose">
+    <span
+      v-if="closable"
+      class="elysium-ui__tag--close"
+      @click="handleClose"
+      role="button"
+      aria-label="移除标签"
+    >
       <icon-close />
     </span>
   </span>