diff --git a/src/input/Input.tsx b/src/input/Input.tsx index cd7603fa..acec7d3c 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -14,7 +14,7 @@ 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 styles from "./Input.module.css"; @@ -96,6 +96,8 @@ export const InputField = forwardRef< }, ref ) => { + const descriptionId = useId(); + return ( } disabled={disabled} + aria-describedby={descriptionId} {...rest} /> ) : ( @@ -122,6 +125,7 @@ export const InputField = forwardRef< type={type} checked={checked} disabled={disabled} + aria-describedby={descriptionId} {...rest} /> )} @@ -135,7 +139,11 @@ export const InputField = forwardRef< {label} {suffix && {suffix}} - {description &&

{description}

} + {description && ( +

+ {description} +

+ )}
); }