feat:添加无障碍信息 (#3974)

Author: discreted66

examples/sites/demos/pc/app/search/events.spec.ts

@@ -5,7 +5,7 @@ test('事件是否正常触发', async ({ page }) => {
   await page.goto('search#events')
 
   const modal = page.locator('.tiny-modal')
-  const input = page.locator('.tiny-search').getByRole('textbox')
+  const input = page.getByRole('searchbox', { name: 'search' })
   const button = page.locator('.tiny-search__input-btn > a').first()
 
   await button.click()

packages/renderless/src/search/vue.ts

@@ -33,6 +33,11 @@ import {
   emitInput
 } from './index'
 
+// 生成唯一 ID 的自定义方法
+const generateUniqueId = (): string => {
+  return `search-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`
+}
+
 export const api = [
   'state',
   'handleChange',
@@ -94,7 +99,8 @@ export const renderless = (
     ...formatSearchTypes.state,
     showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue),
     formItemSize: computed(() => (parent.formItem || {}).formItemSize),
-    searchSize: computed(() => props.size || state.formItemSize)
+    searchSize: computed(() => props.size || state.formItemSize),
+    instanceId: generateUniqueId() // 生成唯一 ID，用于避免多个组件实例时 id 重复
   })
 
   const api = {

packages/renderless/types/search.type.ts

@@ -13,6 +13,7 @@ export interface ISearchState {
   showClear: boolean
   formItemSize: string
   searchSize: string
+  instanceId: string
 }
 
 export type ISearchProps = ExtractPropTypes<typeof searchProps>

packages/vue/src/file-upload/src/mobile-first.vue

@@ -348,7 +348,12 @@ export default defineComponent({
                 <span class="ml-2">{t('ui.fileUpload.uploadFile')}</span>
               </div>
             </tiny-button>
-            <icon-plus-circle custom-class="sm:hidden w-5 h-5 absolute top-0.5 right-5" />
+            <icon-plus-circle
+              role="button"
+              tabindex="0"
+              aria-label={t('ui.fileUpload.uploadFile')}
+              custom-class="sm:hidden w-5 h-5 absolute top-0.5 right-5"
+            />
           </div>
         )
       } else if (listType === 'drag-single') {
@@ -359,7 +364,13 @@ export default defineComponent({
         listType === 'picture-single' && uploadFiles.length && (defaultClass += ' hidden')
 
         defaultContent = (
-          <div class={defaultClass}>
+          <div
+            class={defaultClass}
+            role="button"
+            tabindex="0"
+            aria-label={t('ui.fileUpload.uploadFile')}
+            onKeydown={(event) => event.key === 'Enter' && handleTriggerClick()}
+          >
             <div class="absolute w-full top-1/2 left-0 -translate-y-1/2 z-[1] text-center">
               {defaultList[type || 'picture']}
             </div>
@@ -667,7 +678,13 @@ export default defineComponent({
     const attrs = a($attrs, ['^on[A-Z]'])
 
     return (
-      <div {...attrs} data-tag="tiny-file-upload" class={isDragSingle ? 'relative inline-block' : ''}>
+      <div
+        {...attrs}
+        data-tag="tiny-file-upload"
+        role="group"
+        aria-label={title}
+        class={isDragSingle ? 'relative inline-block' : ''}
+      >
         {getDefaultTitle({ listType, title, showTitle, displayOnly, mode })}
         {noticePC}
         {isText && !displayOnly ? (slots.trigger ? [createUploadComponent()] : createUploadComponent()) : null}

packages/vue/src/file-upload/src/pc.vue

@@ -173,7 +173,7 @@ export default defineComponent({
     const getTriggerContent = (t: any, disabled: boolean) => {
       return (
         <div class="trigger-btn">
-          <tiny-button disabled={disabled} onClick={handleTriggerClick}>
+          <tiny-button disabled={disabled} aria-label={t('ui.fileUpload.uploadFile')} onClick={handleTriggerClick}>
             <TinyIconPlus />
             <span>{t('ui.fileUpload.uploadFile')}</span>
           </tiny-button>
@@ -225,17 +225,36 @@ export default defineComponent({
 
     const getThumIcon = (file) => [
       showDownload && (
-        <span class="thumb-icon" title={t('ui.fileUpload.downloadFile')} onClick={() => execDownload(file)}>
+        <span
+          class="thumb-icon"
+          role="button"
+          tabindex="0"
+          aria-label={t('ui.fileUpload.downloadFile')}
+          title={t('ui.fileUpload.downloadFile')}
+          onClick={() => execDownload(file)}>
           <TinyIconDownload class="download-icon" />
         </span>
       ),
       isEdm && !isFolder && showUpdate && (
-        <span class="thumb-icon" title={t('ui.fileUpload.updateFile')} onClick={() => updateFile(file)}>
+        <span
+          class="thumb-icon"
+          role="button"
+          tabindex="0"
+          aria-label={t('ui.fileUpload.updateFile')}
+          title={t('ui.fileUpload.updateFile')}
+          onClick={() => updateFile(file)}>
           <TinyIconFileCloudupload class="refres-icon" />
         </span>
       ),
       showDel && (
-        <span class="thumb-icon" title={t('ui.fileUpload.deleteFile')} onClick={() => handleRemove(file)}>
+        <span
+          class="thumb-icon"
+          role="button"
+          tabindex="0"
+          aria-label={t('ui.fileUpload.deleteFile')}
+          title={t('ui.fileUpload.deleteFile')}
+          onClick={() => handleRemove(file)}
+          onKeydown={(event) => handleEnter(event, () => handleRemove(file))}>
           <TinyIconClose class="close-icon" />
         </span>
       )
@@ -508,7 +527,7 @@ export default defineComponent({
     const attrs = a($attrs, ['^on[A-Z]'])
 
     return (
-      <div class="tiny-file-upload" {...attrs}>
+      <div class="tiny-file-upload" role="group" aria-label={title} {...attrs}>
         {isSaasType ? getDefaultTitle(title, this.showTitle) : ''}
         {notice}
         {isPictureCard ? uploadList : ''}

packages/vue/src/numeric/src/mobile-first.vue

@@ -24,6 +24,8 @@
         "
         v-if="controls"
         role="button"
+        :aria-disabled="state.minDisabled || state.inputDisabled"
+        aria-label="decrease"
         v-repeat-click="decrease"
         @keydown.enter="decrease"
       >
@@ -51,6 +53,8 @@
         "
         v-if="controls"
         role="button"
+        :aria-disabled="state.maxDisabled || state.inputDisabled"
+        aria-label="increase"
         v-repeat-click="increase"
         @keydown.enter="increase"
       >
@@ -74,6 +78,11 @@
       >
         <input
           :tabindex="tabindex"
+          role="spinbutton"
+          :aria-valuemin="min"
+          :aria-valuemax="max"
+          :aria-valuenow="state.currentValue"
+          :aria-disabled="state.inputDisabled"
           :class="
             m(
               gcls('numeric_input_inner'),

packages/vue/src/numeric/src/pc.vue

@@ -62,6 +62,8 @@
           <span
             class="tiny-numeric__decrease"
             role="button"
+            aria-label="decrease"
+            :aria-disabled="state.minDisabled"
             v-if="state.controls && !unit"
             v-repeat-click="decrease"
             :class="{ 'is-disabled': state.minDisabled }"
@@ -72,6 +74,8 @@
           <span
             class="tiny-numeric__increase"
             role="button"
+            aria-label="increase"
+            :aria-disabled="state.maxDisabled"
             v-if="state.controls && !unit"
             v-repeat-click="increase"
             :class="{ 'is-disabled': state.maxDisabled }"
@@ -103,6 +107,11 @@
               </span>
               <input
                 :tabindex="tabindex"
+                role="spinbutton"
+                :aria-valuemin="min"
+                :aria-valuemax="max"
+                :aria-valuenow="state.currentValue"
+                :aria-disabled="state.inputDisabled"
                 :class="[
                   'tiny-numeric__input-inner',
                   { 'tiny-numeric__show-left': !state.controls && (showLeft || shape === 'filter') }
@@ -130,6 +139,8 @@
       <span
         class="tiny-numeric__decrease"
         role="button"
+        aria-label="decrease"
+        :aria-disabled="state.minDisabled"
         v-if="controls && !unit"
         v-repeat-click="decrease"
         :class="{ 'is-disabled': state.minDisabled }"
@@ -140,6 +151,8 @@
       <span
         class="tiny-numeric__increase"
         role="button"
+        aria-label="increase"
+        :aria-disabled="state.maxDisabled"
         v-if="controls && !unit"
         v-repeat-click="increase"
         :class="{ 'is-disabled': state.maxDisabled }"
@@ -171,6 +184,11 @@
           </span>
           <input
             :tabindex="tabindex"
+            role="spinbutton"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="state.currentValue"
+            :aria-disabled="state.inputDisabled"
             :class="['tiny-numeric__input-inner', { 'tiny-numeric__show-left': !controls && showLeft }]"
             ref="input"
             :value="state.displayValue"

packages/vue/src/search/src/mobile-first.vue

@@ -2,6 +2,8 @@
   <div
     :class="m(gcls('search-default'))"
     data-tag="tiny-search"
+    role="search"
+    :aria-label="placeholder || 'search'"
     @mouseenter="state.hovering = true"
     @mouseleave="state.hovering = false"
   >
@@ -30,6 +32,10 @@
               gcls({ 'pc-search-present-unbig': size === 'small' && !big })
             )
           "
+          role="button"
+          tabindex="0"
+          aria-haspopup="listbox"
+          :aria-expanded="state.show"
           @click="showSelector"
         >
           <slot name="text" :slot-scope="state.searchValue">
@@ -70,6 +76,11 @@
         :placeholder="placeholder"
         type="text"
         data-tag="tiny-search__input"
+        role="searchbox"
+        :aria-label="placeholder || 'search input'"
+        :aria-expanded="state.show"
+        :aria-controls="state.show ? `tiny-search__selector-${state.instanceId}` : undefined"
+        aria-haspopup="listbox"
         @keyup.enter="searchEnterKey"
         @input="handleInput"
         @change="handleChange"
@@ -91,7 +102,13 @@
           "
           v-if="state.showClear && !state.collapse"
         >
-          <a :class="m(gcls('pc-search-input-btn-transtion-a'))" @click="clear">
+          <a
+            :class="m(gcls('pc-search-input-btn-transtion-a'))"
+            role="button"
+            tabindex="0"
+            aria-label="clear search"
+            @click="clear"
+          >
             <icon-close
               @mousedown.prevent
               data-tag="tiny-svg-size"
@@ -111,7 +128,13 @@
           )
         "
       >
-        <a :class="m(gcls('pc-search-input-btn-a'))" @click="searchClick">
+        <a
+          :class="m(gcls('pc-search-input-btn-a'))"
+          role="button"
+          tabindex="0"
+          aria-label="submit search"
+          @click="searchClick"
+        >
           <icon-search
             :class="
               m(
@@ -129,14 +152,21 @@
         v-show="state.show && state.types.length"
         ref="selector"
         data-tag="tiny-search__selector"
+        :id="`tiny-search__selector-${state.instanceId}`"
         :class="m(gcls('search-selector'))"
+        role="listbox"
       >
         <div data-tag="tiny-search__selector-body" :class="m(gcls('search-selector-body'))">
           <ul data-tag="tiny-search__poplist">
             <li
               v-for="(item, index) in state.types"
               :key="index"
               data-tag="tiny-search__poplist-item"
+              role="option"
+              :aria-label="item.text || item.label"
+              :aria-selected="item === state.searchValue"
+              :id="`tiny-search__option-${state.instanceId}-${index}`"
+              tabindex="-1"
               :class="
                 m(
                   gcls('search-selector-poplist-item'),