mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-17 21:32:51 +08:00
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:
@ -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,
|
||||
|
Reference in New Issue
Block a user