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

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

* fix(select): fix select's e2e test

Author: shenjunjian

examples/sites/demos/pc/app/select/allow-create.spec.ts

@@ -16,12 +16,12 @@ test('点击选中', async ({ page }) => {
   await input.dispatchEvent('keyup', { KeyboardEvent })
 
   await expect(input).toHaveValue('测试 allow-create')
-  await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' }).click()
   await expect(input).toHaveValue('测试 allow-create')
 
   await input.click()
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
 })
 
 test('enter 选中', async ({ page }) => {
@@ -46,5 +46,5 @@ test('enter 选中', async ({ page }) => {
   await input.click()
 
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
 })

examples/sites/demos/pc/app/select/automatic-dropdown.spec.ts

@@ -23,9 +23,9 @@ test('可搜索时，获取焦点自动下拉', async ({ page }) => {
 
   await wrap.getByRole('button').nth(1).click()
   // 聚焦下拉
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
   // 验证选中
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '上海' })).toHaveClass(/selected/)
 })

examples/sites/demos/pc/app/select/basic-usage.spec.ts

@@ -6,14 +6,14 @@ test('基础用法标签式', async ({ page }) => {
   const wrap = page.locator('#basic-usage')
   const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const dropdown = page.locator('body > .tiny-select-dropdown').nth(0)
   const option = dropdown.locator('.tiny-option')
 
   await input.click()
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()
@@ -36,7 +36,7 @@ test('基础用法配置式', async ({ page }) => {
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()

examples/sites/demos/pc/app/select/binding-obj.spec.ts

@@ -10,12 +10,12 @@ test('binding-obj', async ({ page }) => {
   const valueLocator = wrap.locator('.value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '重庆' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '重庆' }).click()
   await expect(input).toHaveValue('重庆')
   await expect(valueLocator).toHaveText('{ "val": "选项 4", "id": 4 }')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await expect(valueLocator).toHaveText('{ "val": "选项 3", "id": 3 }')
 })

examples/sites/demos/pc/app/select/cache-usage.spec.ts

@@ -10,10 +10,10 @@ test('cache-op', async ({ page }) => {
   const cacheValue = wrap.locator('.cache-value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '北京' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '北京' }).click()
   await expect(cacheValue).toContainText(['选项 1'])
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(cacheValue).toContainText(['选项 2'])
 })

examples/sites/demos/pc/app/select/clearable.spec.ts

@@ -16,6 +16,6 @@ test('clearable', async ({ page }) => {
   await expect(input).toHaveValue('')
   // 验证选中
   await icon.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
 })

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']">