mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-07 15:47:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [select] add tabindex attribute (#19034)

Browse Source
This commit is contained in:
qiang 2024-11-28 13:54:05 +08:00 committed by GitHub
parent 803c37dc69
commit 990aa4b768
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en-US/component/select-v2.md
View File

@ -266,6 +266,7 @@ select-v2/custom-label
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
| popper-append-to-body ^(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | ^[boolean] | false |
| tabindex ^(2.9.0) | tabindex for input | ^[string] / ^[number] | — |
### props

1
docs/en-US/component/select.md
View File

@ -233,6 +233,7 @@ select/custom-label
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
| suffix-transition ^(deprecated) | animation when dropdown appears/disappears icon | ^[boolean] | true |
| tabindex ^(2.9.0) | tabindex for input | ^[string] / ^[number] | — |
:::warning

26
packages/components/select-v2/__tests__/select.test.ts
View File

@ -117,6 +117,7 @@ const createSelect = (
:reserve-keyword="reserveKeyword"
:scrollbar-always-on="scrollbarAlwaysOn"
:teleported="teleported"
:tabindex="tabindex"
${
options.methods && options.methods.filterMethod
? `:filter-method="filterMethod"`
@ -165,6 +166,7 @@ const createSelect = (
scrollbarAlwaysOn: false,
popperAppendToBody: undefined,
teleported: undefined,
tabindex: undefined,
...(options.data && options.data()),
}
},
@ -1973,4 +1975,28 @@ describe('Select', () => {
await wrapper.find(`.${WRAPPER_CLASS_NAME}`).trigger('click')
expect(handleClick).toHaveBeenCalledOnce()
})
describe('It should generate accessible attributes', () => {
it('create', async () => {
const wrapper = createSelect()
const input = wrapper.find('input')
expect(input.attributes('role')).toBe('combobox')
expect(input.attributes('tabindex')).toBe('0')
expect(input.attributes('aria-autocomplete')).toBe('list')
expect(input.attributes('aria-expanded')).toBe('false')
expect(input.attributes('aria-haspopup')).toBe('listbox')
})
it('tabindex', () => {
const wrapper = createSelect({
data: () => ({
tabindex: 1,
}),
})
const input = wrapper.find('input')
expect(input.attributes('tabindex')).toBe('1')
})
})
})

7
packages/components/select-v2/src/defaults.ts
View File

@ -274,6 +274,13 @@ export const SelectProps = buildProps({
* @description tag effect
*/
tagEffect: { ...tagProps.effect, default: 'light' },
/**
* @description tabindex for input
*/
tabindex: {
type: [String, Number],
default: 0,
},
/**
* @description which element the select dropdown appends to
*/

1
packages/components/select-v2/src/select.vue
View File

@ -155,6 +155,7 @@
v-model="states.inputValue"
:style="inputStyle"
:autocomplete="autocomplete"
:tabindex="tabindex"
aria-autocomplete="list"
aria-haspopup="listbox"
autocapitalize="off"

14
packages/components/select/__tests__/select.test.ts
View File

@ -2753,6 +2753,7 @@ describe('Select', () => {
)
expect(input.attributes('role')).toBe('combobox')
expect(input.attributes('tabindex')).toBe('0')
expect(input.attributes('aria-autocomplete')).toBe('none')
expect(input.attributes('aria-controls')).toBe(list.attributes('id'))
expect(input.attributes('aria-expanded')).toBe('false')
@ -2770,6 +2771,19 @@ describe('Select', () => {
expect(disabledOption.attributes('aria-disabled')).toBe('true')
})
it('tabindex', async () => {
wrapper = _mount(
`<el-select v-model="value" tabindex="1">
<el-option label="label" value="1" />
<el-option label="disabled" value="2" disabled />
</el-select>`,
() => ({ value: '1' })
)
const input = wrapper.find('input')
expect(input.attributes('tabindex')).toBe('1')
})
it('should be trigger the click event', async () => {
const handleClick = vi.fn()
const wrapper = _mount(`<el-select @click="handleClick" />`, () => ({

7
packages/components/select/src/select.ts
View File

@ -238,6 +238,13 @@ export const SelectProps = buildProps({
type: definePropType<Placement[]>(Array),
default: ['bottom-start', 'top-start', 'right', 'left'],
},
/**
* @description tabindex for input
*/
tabindex: {
type: [String, Number],
default: 0,
},
/**
* @description which element the selection dropdown appends to
*/

1
packages/components/select/src/select.vue
View File

@ -159,6 +159,7 @@
:disabled="selectDisabled"
:autocomplete="autocomplete"
:style="inputStyle"
:tabindex="tabindex"
role="combobox"
:readonly="!filterable"
spellcheck="false"