diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx index 2782ab71..12a1328f 100644 --- a/src/components/form/Input.tsx +++ b/src/components/form/Input.tsx @@ -137,6 +137,18 @@ const InputComponent = React.forwardRef>( onInput: userOnInput, ...inputProps } = rest + + const generatedId = React.useId() + const inputId = (inputProps.id as string | undefined) ?? generatedId + const labelId = `${inputId}-label` + const ariaLabelFallback = !title + ? ((inputProps["aria-label"] as string | undefined) ?? (inputProps.placeholder as string | undefined)) + : undefined + const accessibilityProps = { + id: inputId, + ...(title ? {"aria-labelledby": labelId} : {}), + ...(ariaLabelFallback ? {"aria-label": ariaLabelFallback} : {}), + } const wrapperRef = useRef(null) const inputRef = useRef(null) @@ -728,6 +740,7 @@ const InputComponent = React.forwardRef>( key={syntaxRenderKey} ref={editorRef as any} {...mergedEditableProps} + {...accessibilityProps} contentEditable={!disabled && !disabledOnValue} suppressContentEditableWarning aria-disabled={disabled || disabledOnValue} @@ -762,6 +775,7 @@ const InputComponent = React.forwardRef>(