Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shenjunjian wants to merge 2 commits into
base: dev
Choose a base branch
from
+44 −15
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfc7549
fix(select): add some aria-* props for ai
shenjunjian Dec 4, 2025
7747a87
fix(select): fix select's e2e test
shenjunjian Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/select/allow-create.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand All @@ -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/)
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/select/automatic-dropdown.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/)
})
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/select/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/select/binding-obj.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }')
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/select/cache-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'])
})
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select/clearable.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('上海')
})
3 changes: 2 additions & 1 deletion packages/renderless/src/select/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,8 @@ const initState = ({
content: state.displayOnlyContent,
always: !!state.displayOnlyContent,
...props.tooltipConfig
}))
})),
ariaListId: 'tiny-select-' + crypto.randomUUID().slice(-8)
Comment on lines +299 to +300
Copy link

@coderabbitai coderabbitai bot Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Check for browserslist and browser support configuration
fd -t f "browserslist|.browserslistrc" || echo "No browserslist found"
# Also check package.json for engine constraints and browser field
cat package.json | head -50

Repository: opentiny/tiny-vue

Length of output: 1731

🏁 Script executed:

# Search for crypto.randomUUID usage in the codebase
rg "crypto\.randomUUID|crypto\.getRandomValues" -A 2 -B 2

Repository: opentiny/tiny-vue

Length of output: 4224

🏁 Script executed:

# Check if there are any polyfills or UUID libraries already in use
rg "uuid|polyfill|fillRandom|getRandomValues" -l | head -20

Repository: opentiny/tiny-vue

Length of output: 385

🏁 Script executed:

# Look for browserslist configuration in various locations
find . -maxdepth 2 -type f \( -name ".browserslistrc" -o -name "browserslist" \) -o -path "*/package.json" | head -10

Repository: opentiny/tiny-vue

Length of output: 75

🏁 Script executed:

# Check if there's a browserslist config in root or package.json
cat package.json | grep -A 10 "browserslist"

Repository: opentiny/tiny-vue

Length of output: 120

🏁 Script executed:

# Check the nanoid utility since it has IE polyfills
head -80 packages/utils/src/nanoid/index.ts

Repository: opentiny/tiny-vue

Length of output: 1674

🏁 Script executed:

# Check how generateID is implemented in the codebase
cat packages/vue/src/query-builder/src/utils/generateID.ts

Repository: opentiny/tiny-vue

Length of output: 2040

Replace direct crypto.randomUUID() with the project's existing generateID() utility.

The codebase uses crypto.randomUUID() without fallback, which is inconsistent with the established pattern. The project's generateID() utility in packages/vue/src/query-builder/src/utils/generateID.ts provides proper browser compatibility handling with fallbacks for environments where randomUUID() is unavailable.

-    ariaListId: 'tiny-select-' + crypto.randomUUID().slice(-8)
+    ariaListId: 'tiny-select-' + generateID().slice(-8)

Import generateID from @opentiny/utils at the top of the file.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In packages/renderless/src/select/vue.ts around lines 299-300, replace the
direct use of crypto.randomUUID() for ariaListId with the project's generateID()
utility to ensure browser compatibility; add an import for generateID from
'@opentiny/utils' at the top of the file and use generateID().slice(-8) (or
otherwise adapt to generateID() return format) when constructing 'tiny-select-'
+ ... so it mirrors the existing pattern and fallback handling.

})

return state
Expand Down
3 changes: 3 additions & 0 deletions packages/vue/src/option/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/vue/src/option/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`" />
Expand Down
17 changes: 16 additions & 1 deletion packages/vue/src/select/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -340,6 +350,8 @@
:popper-options="popperOptions"
:class="m('duration-300')"
:height="dropdownHeight"
role="listbox"
:id="state.ariaListId"
>
<div
v-if="shape && filterable"
Expand Down Expand Up @@ -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']">
Expand Down
7 changes: 7 additions & 0 deletions packages/vue/src/select/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
Loading