feat(components): [date-picker] accessibility enhancement (#18109)

* feat(components): [date-picker] accessibility enhancement

closed #14150

* docs: update

* test: add test

* chore: change prevent to passive

* fix: long press the clear icon to open the time panel

* fix: cannot read $el

* fix: cannot read $el

* docs: updata
This commit is contained in:
qiang
2024-10-27 12:14:53 +08:00
committed by GitHub
parent 0e8454a99e
commit 845c07adef
15 changed files with 443 additions and 270 deletions

View File

@ -1,6 +1,5 @@
<template>
<div
v-bind="containerAttrs"
:class="[
containerKls,
{
@ -9,7 +8,6 @@
},
]"
:style="containerStyle"
:role="containerRole"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
@ -48,6 +46,7 @@
:style="inputStyle"
:form="form"
:autofocus="autofocus"
:role="containerRole"
@compositionstart="handleCompositionStart"
@compositionupdate="handleCompositionUpdate"
@compositionend="handleCompositionEnd"
@ -126,6 +125,7 @@
:form="form"
:autofocus="autofocus"
:rows="rows"
:role="containerRole"
@compositionstart="handleCompositionStart"
@compositionupdate="handleCompositionUpdate"
@compositionend="handleCompositionEnd"
@ -201,18 +201,9 @@ const props = defineProps(inputProps)
const emit = defineEmits(inputEmits)
const rawAttrs = useRawAttrs()
const attrs = useAttrs()
const slots = useSlots()
const containerAttrs = computed(() => {
const comboBoxAttrs: Record<string, unknown> = {}
if (props.containerRole === 'combobox') {
comboBoxAttrs['aria-haspopup'] = rawAttrs['aria-haspopup']
comboBoxAttrs['aria-owns'] = rawAttrs['aria-owns']
comboBoxAttrs['aria-expanded'] = rawAttrs['aria-expanded']
}
return comboBoxAttrs
})
const containerKls = computed(() => [
props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),
nsInput.m(inputSize.value),
@ -235,11 +226,6 @@ const wrapperKls = computed(() => [
nsInput.is('focus', isFocused.value),
])
const attrs = useAttrs({
excludeKeys: computed<string[]>(() => {
return Object.keys(containerAttrs.value)
}),
})
const { form: elForm, formItem: elFormItem } = useFormItem()
const { inputId } = useFormItemInputId(props, {
formItemContext: elFormItem,