feat(FormField): set aria-describedby and aria-invalid attributes (#3123)

This commit is contained in:
Romain Hamel
2025-01-20 11:46:09 +01:00
committed by GitHub
parent b8d99726ef
commit b95b91391a
21 changed files with 275 additions and 135 deletions

View File

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<PinInputProps>(), {
const emits = defineEmits<PinInputEmits>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emits)
const { emitFormInput, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled } = useFormField<PinInputProps>(props)
const { emitFormInput, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(props)
const ui = computed(() => pinInput({
color: color.value,
@@ -77,7 +77,7 @@ function onBlur(event: FocusEvent) {
<template>
<PinInputRoot
v-bind="rootProps"
v-bind="{ ...rootProps, ...ariaAttrs }"
:id="id"
:name="name"
:class="ui.root({ class: [props.class, props.ui?.root] })"