29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { Input, type InputProps, type InputRef } from "tdesign-react";
|
|
|
|
export interface AccessibleInputProps extends InputProps {
|
|
inputAriaLabel?: string;
|
|
inputAriaInvalid?: boolean;
|
|
inputAriaDescribedby?: string;
|
|
}
|
|
|
|
/**
|
|
* TDesign places unknown aria props on its wrapper. This adapter mirrors the
|
|
* important field attributes onto the native input so labels, errors and
|
|
* keyboard tooling target the actual editable control.
|
|
*/
|
|
export default function AccessibleInput({ inputAriaLabel, inputAriaInvalid, inputAriaDescribedby, ...props }: AccessibleInputProps) {
|
|
const ref = useRef<InputRef>(null);
|
|
useEffect(() => {
|
|
const input = ref.current?.inputElement;
|
|
if (!input) return;
|
|
if (inputAriaLabel) input.setAttribute("aria-label", inputAriaLabel);
|
|
else input.removeAttribute("aria-label");
|
|
if (inputAriaInvalid) input.setAttribute("aria-invalid", "true");
|
|
else input.removeAttribute("aria-invalid");
|
|
if (inputAriaDescribedby) input.setAttribute("aria-describedby", inputAriaDescribedby);
|
|
else input.removeAttribute("aria-describedby");
|
|
}, [inputAriaDescribedby, inputAriaInvalid, inputAriaLabel]);
|
|
return <Input {...props} ref={ref} />;
|
|
}
|