From 3cac74df245d729398806d522b533494d99ddd05 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 7 Nov 2022 12:28:54 +0000
Subject: [PATCH] Add aria-describedBy to textarea and use useID

---
 src/input/Input.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 047a7a61..738a1511 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { ChangeEvent, FC, forwardRef, ReactNode } from "react";
 import classNames from "classnames";
+import { useId } from "@react-aria/utils";
 
 import styles from "./Input.module.css";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
@@ -96,6 +97,8 @@ export const InputField = forwardRef<
     },
     ref
   ) => {
+    const descriptionId = useId(id + "-desc");
+
     return (
       <Field
         className={classNames(
@@ -113,6 +116,7 @@ export const InputField = forwardRef<
             id={id}
             ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
             disabled={disabled}
+            aria-describedby={descriptionId}
             {...rest}
           />
         ) : (
@@ -122,7 +126,7 @@ export const InputField = forwardRef<
             type={type}
             checked={checked}
             disabled={disabled}
-            aria-describedby={description ? id + "-desc" : undefined}
+            aria-describedby={descriptionId}
             {...rest}
           />
         )}
@@ -137,7 +141,7 @@ export const InputField = forwardRef<
         </label>
         {suffix && <span>{suffix}</span>}
         {description && (
-          <p id={id + "-desc"} className={styles.description}>
+          <p id={descriptionId} className={styles.description}>
             {description}
           </p>
         )}