release: 1.1.0

web-next/src/components/AccessibleInput.tsx

@@ -0,0 +1,28 @@
+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} />;
+}