fix(select): add some aria-* props for ai

Author: shenjunjian

packages/renderless/src/select/vue.ts

@@ -296,7 +296,8 @@ const initState = ({
       content: state.displayOnlyContent,
       always: !!state.displayOnlyContent,
       ...props.tooltipConfig
-    }))
+    })),
+    ariaListId: 'tiny-select-' + crypto.randomUUID().slice(-8)
   })
 
   return state

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

@@ -21,6 +21,9 @@
       )
     "
     data-tag="tiny-option"
+    role="option"
+    :aria-label="state.currentLabel"
+    :aria-selected="state.itemSelected"
   >
     <span v-if="state.selectMultiple" class="w-4 mr-2">
       <component

packages/vue/src/option/src/pc.vue

@@ -17,6 +17,9 @@
       },
       highlightClass
     ]"
+    role="option"
+    :aria-label="state.currentLabel"
+    :aria-selected="state.itemSelected"
   >
     <span v-if="state.selectMultiple" class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
       <component :is="`icon-${state.selectCls}`" :class="`tiny-svg-size ${state.selectCls}`" />

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

@@ -245,6 +245,11 @@
             'max-width': state.inputWidth - 42 + 'px',
             height: 'auto'
           }"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+          :aria-owns="state.ariaListId"
+          :aria-controls="state.ariaListId"
         />
       </div>
       <tiny-input
@@ -277,6 +282,11 @@
         @mouseenter="onMouseenterNative"
         @mouseleave="onMouseleaveNative"
         @compositionend.native="handleComposition"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-autocomplete="list"
+        :aria-owns="state.ariaListId"
+        :aria-controls="state.ariaListId"
       >
         <template #prefix v-if="slots.prefix">
           <slot name="prefix"></slot>
@@ -340,6 +350,8 @@
           :popper-options="popperOptions"
           :class="m('duration-300')"
           :height="dropdownHeight"
+          role="listbox"
+          :id="state.ariaListId"
         >
           <div
             v-if="shape && filterable"
@@ -451,7 +463,10 @@
               <component
                 :is="`icon-${state.selectCls}`"
                 :class="
-                  m(['-mt-0.5 mr-2 fill-color-icon-secondary w-3.5 h-3.5 ', state.selectCls !== 'check' && 'fill-color-brand text-color-brand'])
+                  m([
+                    '-mt-0.5 mr-2 fill-color-icon-secondary w-3.5 h-3.5 ',
+                    state.selectCls !== 'check' && 'fill-color-brand text-color-brand'
+                  ])
                 "
               />
               <span :class="[state.selectCls === 'checked-sur' ? 'text-color-brand' : 'text-color-text-primary']">

packages/vue/src/select/src/pc.vue

@@ -294,6 +294,11 @@
           @mouseenter="onMouseenterNative"
           @mouseleave="onMouseleaveNative"
           @compositionend.native="handleComposition"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+          :aria-owns="state.ariaListId"
+          :aria-controls="state.ariaListId"
         >
           <template #prefix v-if="slots.prefix">
             <slot name="prefix"></slot>
@@ -354,6 +359,8 @@
           v-show="!onCopying() && !hideDrop && state.visible && state.emptyText !== false"
           :style="dropStyle"
           :popper-options="popperOptions"
+          role="listbox"
+          :id="state.ariaListId"
         >
           <div
             v-if="shape && filterable"