Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-15 00:04:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #728 from vector-im/dbkr/aria-describedby

Browse Source 
Add aria-describedby associations
This commit is contained in:
David Baker 2022-11-07 22:45:37 +00:00 committed by GitHub
commit 85b02a3589
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/input/Input.tsx
View File

@ -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 (
<Field
className={classNames(
@ -113,6 +115,7 @@ export const InputField = forwardRef<
id={id}
ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
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}
</label>
{suffix && <span>{suffix}</span>}
{description && <p className={styles.description}>{description}</p>}
{description && (
<p id={descriptionId} className={styles.description}>
{description}
</p>
)}
</Field>
);
}