fix(dropdown): add aria information to the dropdown component (#3913)

Author: shenjunjian

packages/renderless/src/dropdown/index.ts

@@ -179,7 +179,7 @@ export const initAria =
   ({ state, props }: Pick<IDropdownRenderlessParams, 'state' | 'props'>) =>
   () => {
     state.dropdownElm?.setAttribute('id', state.listId)
-    state.triggerElm?.setAttribute('aria-haspopup', 'list')
+    state.triggerElm?.setAttribute('aria-haspopup', 'menu')
     state.triggerElm?.setAttribute('aria-controls', state.listId)
 
     if (!props.splitButton || !props.singleButton) {

packages/vue/src/dropdown-item/src/pc.vue

@@ -30,6 +30,7 @@
     @mousedown.stop
     :aria-disabled="disabled"
     :tabindex="disabled ? null : -1"
+    role="menuitem"
   >
     <div class="tiny-dropdown-item__wrap">
       <span

packages/vue/src/dropdown-menu/src/pc.vue

@@ -18,6 +18,7 @@
       v-show="state.showPopper"
       @mouseenter="handleMouseenter"
       @mouseleave="handleMouseleave"
+      role="menu"
     >
       <template v-if="state.initShowPopper || state.showPopper">
         <slot :selected-index="state.selectedIndex">

packages/vue/src/dropdown/src/pc.vue

@@ -152,7 +152,7 @@ export default defineComponent({
             class={`tiny-dropdown__caret-button ${triggerClass}`}
             disabled={disabled}
             reset-time={0}>
-            <ButtonIconDown class={visibleClass}></ButtonIconDown>
+            <ButtonIconDown class={visibleClass} aria-label="down"></ButtonIconDown>
           </tiny-button>
         </tiny-button-group>
       )
@@ -169,7 +169,9 @@ export default defineComponent({
 
       // 增加一层，vue3 环境中无法使用 slots.default 的方式获取原生 DOM 元素
       const suffixInner = showIcon ? (
-        <span class={'tiny-dropdown__suffix-inner ' + visibleClass}>{suffixSlot || <IconDown></IconDown>}</span>
+        <span class={'tiny-dropdown__suffix-inner ' + visibleClass}>
+          {suffixSlot || <IconDown aria-label="down"></IconDown>}
+        </span>
       ) : (
         ''
       )
@@ -194,15 +196,17 @@ export default defineComponent({
           class={`tiny-dropdown__border ${state.visible ? 'is-expand' : ''}${
             showIcon ? ' is-show-icon ' : ''
           } ${triggerClass}`}
-          reset-time={0}>
+          reset-time={0}
+          aria-label="down">
           {prefixInner}
           {defaultTriggerElm}
           {suffixInner}
         </tiny-button>
       ) : (
         <span
           ref="trigger"
-          class={`is-text${state.visible ? ' is-expand' : ' is-hide'}${disabled ? ' is-disabled' : ''} ${triggerClass}`}>
+          class={`is-text${state.visible ? ' is-expand' : ' is-hide'}${disabled ? ' is-disabled' : ''} ${triggerClass}`}
+          aria-label="down">
           {prefixInner}
           {defaultTriggerElm}
           {suffixInner}