tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(examples/form-builder): improve form input accessibility (#4166)

Browse Source
This commit is contained in:
Jonathan Wu
2023-11-17 00:02:15 +11:00
committed by GitHub
parent b210af4696
commit 191c13a409
7 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
View File

@@ -21,7 +21,7 @@ export const Country: React.FC<
return (
<Width width={width}>
<div className={classes.select}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<Controller
@@ -37,6 +37,7 @@ export const Country: React.FC<
onChange={val => onChange(val.value)}
className={classes.reactSelect}
classNamePrefix="rs"
inputId={name}
/>
)}
/>

3
examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx
View File

@@ -19,13 +19,14 @@ export const Email: React.FC<
return (
<Width width={width}>
<div className={classes.wrap}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<input
type="text"
placeholder="Email"
className={classes.input}
id={name}
{...register(name, { required: requiredFromProps, pattern: /^\S+@\S+$/i })}
/>
{requiredFromProps && errors[name] && <Error />}

3
examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx
View File

@@ -19,12 +19,13 @@ export const Number: React.FC<
return (
<Width width={width}>
<div className={classes.wrap}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<input
type="number"
className={classes.input}
id={name}
{...register(name, { required: requiredFromProps })}
/>
{requiredFromProps && errors[name] && <Error />}

3
examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
View File

@@ -20,7 +20,7 @@ export const Select: React.FC<
return (
<Width width={width}>
<div className={classes.select}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<Controller
@@ -36,6 +36,7 @@ export const Select: React.FC<
onChange={val => onChange(val.value)}
className={classes.reactSelect}
classNamePrefix="rs"
inputId={name}
/>
)}
/>

3
examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
View File

@@ -21,7 +21,7 @@ export const State: React.FC<
return (
<Width width={width}>
<div className={classes.select}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<Controller
@@ -37,6 +37,7 @@ export const State: React.FC<
onChange={val => onChange(val.value)}
className={classes.reactSelect}
classNamePrefix="rs"
id={name}
/>
)}
/>

3
examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx
View File

@@ -19,12 +19,13 @@ export const Text: React.FC<
return (
<Width width={width}>
<div className={classes.wrap}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<input
type="text"
className={classes.input}
id={name}
{...register(name, { required: requiredFromProps })}
/>
{requiredFromProps && errors[name] && <Error />}

3
examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx
View File

@@ -20,12 +20,13 @@ export const Textarea: React.FC<
return (
<Width width={width}>
<div className={classes.wrap}>
<label htmlFor="name" className={classes.label}>
<label htmlFor={name} className={classes.label}>
{label}
</label>
<textarea
rows={rows}
className={classes.textarea}
id={name}
{...register(name, { required: requiredFromProps })}
/>
{requiredFromProps && errors[name] && <Error />}