test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-12 12:25:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(components): [select] add aria-label to select's input (#13932)

Browse Source 
* feat(components): [select] add aria-label to select's input

Select's input causes accessibility issues without aria-label, this commit adds it

* refactor(components): [select] change aria-label to label; update docs

* refactor(components): [select] change back to ariaLabel prop name

* docs(components): kebab-case for docs
This commit is contained in:
Karolis_Stoncius_Sneakybox 2023-08-24 16:03:01 +03:00 committed by GitHub
parent 268457135e
commit c29f6cc6c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,6 +163,7 @@ select/value-key
| placement ^(2.2.17) | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start | | placement ^(2.2.17) | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start |
| max-collapse-tags ^(2.3.0) | the max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 | | max-collapse-tags ^(2.3.0) | the max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 |
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | ^[object]refer to [popper.js](https://popper.js.org/docs/v2/) doc | {} | | popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | ^[object]refer to [popper.js](https://popper.js.org/docs/v2/) doc | {} |
| aria-label ^(a11y) | same as `aria-label` in native input | ^[string] | — |
:::warning :::warning

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

@ -149,6 +149,7 @@
:disabled="selectDisabled" :disabled="selectDisabled"
:autocomplete="autocomplete" :autocomplete="autocomplete"
:style="inputStyle" :style="inputStyle"
:aria-label="ariaLabel"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@keyup="managePlaceholder" @keyup="managePlaceholder"
@ -191,6 +192,7 @@
:validate-event="false" :validate-event="false"
:class="[nsSelect.is('focus', visible)]" :class="[nsSelect.is('focus', visible)]"
:tabindex="multiple && filterable ? -1 : undefined" :tabindex="multiple && filterable ? -1 : undefined"
:label="ariaLabel"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@input="debouncedOnInputChange" @input="debouncedOnInputChange"
@ -526,6 +528,13 @@ export default defineComponent({
values: placements, values: placements,
default: 'bottom-start', default: 'bottom-start',
}, },
/**
* @description native input aria-label
*/
ariaLabel: {
type: String,
default: undefined,
},
}, },
emits: [ emits: [
UPDATE_MODEL_EVENT, UPDATE_MODEL_EVENT,