Add aria-describedBy to textarea and use useID
This commit is contained in:
parent
58e505cd38
commit
3cac74df24
1 changed files with 6 additions and 2 deletions
|
@ -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>
|
||||
)}
|
||||
|
|
Loading…
Reference in a new issue