From 58e505cd38bf3dcc53043e9cf477d29f2e4128ce Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 4 Nov 2022 18:10:53 +0000
Subject: [PATCH 1/3] Add aria-describedby associations

---
 src/input/Input.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index cd7603fa..047a7a61 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -122,6 +122,7 @@ export const InputField = forwardRef<
             type={type}
             checked={checked}
             disabled={disabled}
+            aria-describedby={description ? id + "-desc" : undefined}
             {...rest}
           />
         )}
@@ -135,7 +136,11 @@ export const InputField = forwardRef<
           {label}
         </label>
         {suffix && <span>{suffix}</span>}
-        {description && <p className={styles.description}>{description}</p>}
+        {description && (
+          <p id={id + "-desc"} className={styles.description}>
+            {description}
+          </p>
+        )}
       </Field>
     );
   }

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 2/3] 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>
         )}

From d5a5ce9860459e6928a96b044a5dc2446db4e47d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 7 Nov 2022 14:05:58 +0000
Subject: [PATCH 3/3] Don't pass potentially undefined 'desc' to useId

Also use the useId that comes with React 18.
---
 src/input/Input.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 738a1511..acec7d3c 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent, FC, forwardRef, ReactNode } from "react";
+import React, { ChangeEvent, FC, forwardRef, ReactNode, useId } 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";
@@ -97,7 +96,7 @@ export const InputField = forwardRef<
     },
     ref
   ) => {
-    const descriptionId = useId(id + "-desc");
+    const descriptionId = useId();
 
     return (
       <Field