Skip to content

Commit 45fcde4

Browse files
delbaoliveiradelbaoliveira
authored
Improve Form Error Accessibility (#450)
1 parent 0a3dda2 commit 45fcde4

File tree

3 files changed

+58
-74
lines changed

3 files changed

+58
-74
lines changed

‎dashboard/final-example/app/ui/invoices/create-form.tsx

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,14 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
4444
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
4545
</div>
4646

47-
{state.errors?.customerId ? (
48-
<div
49-
id="customer-error"
50-
aria-live="polite"
51-
className="mt-2 text-sm text-red-500"
52-
>
53-
{state.errors.customerId.map((error: string) => (
54-
<p key={error}>{error}</p>
47+
<div id="customer-error" aria-live="polite" aria-atomic="true">
48+
{state.errors?.customerId &&
49+
state.errors.customerId.map((error: string) => (
50+
<p className="mt-2 text-sm text-red-500" key={error}>
51+
{error}
52+
</p>
5553
))}
56-
</div>
57-
) : null}
54+
</div>
5855
</div>
5956

6057
{/* Invoice Amount */}
@@ -77,17 +74,14 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
7774
</div>
7875
</div>
7976

80-
{state.errors?.amount ? (
81-
<div
82-
id="amount-error"
83-
aria-live="polite"
84-
className="mt-2 text-sm text-red-500"
85-
>
86-
{state.errors.amount.map((error: string) => (
87-
<p key={error}>{error}</p>
77+
<div id="amount-error" aria-live="polite" aria-atomic="true">
78+
{state.errors?.amount &&
79+
state.errors.amount.map((error: string) => (
80+
<p className="mt-2 text-sm text-red-500" key={error}>
81+
{error}
82+
</p>
8883
))}
89-
</div>
90-
) : null}
84+
</div>
9185
</div>
9286

9387
{/* Invoice Status */}
@@ -129,24 +123,21 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
129123
</div>
130124
</div>
131125
</div>
132-
{state.errors?.status ? (
133-
<div
134-
aria-describedby="status-error"
135-
aria-live="polite"
136-
className="mt-2 text-sm text-red-500"
137-
>
138-
{state.errors.status.map((error: string) => (
139-
<p key={error}>{error}</p>
126+
<div id="status-error" aria-live="polite" aria-atomic="true">
127+
{state.errors?.status &&
128+
state.errors.status.map((error: string) => (
129+
<p className="mt-2 text-sm text-red-500" key={error}>
130+
{error}
131+
</p>
140132
))}
141-
</div>
142-
) : null}
133+
</div>
143134
</fieldset>
144135

145-
{state.message ? (
146-
<div aria-live="polite" className="my-2 text-sm text-red-500">
147-
<p>{state.message}</p>
148-
</div>
149-
) : null}
136+
<div aria-live="polite" aria-atomic="true">
137+
{state.message ? (
138+
<p className="mt-2 text-sm text-red-500">{state.message}</p>
139+
) : null}
140+
</div>
150141
</div>
151142
<div className="mt-6 flex justify-end gap-4">
152143
<Link

‎dashboard/final-example/app/ui/invoices/edit-form.tsx

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,14 @@ export default function EditInvoiceForm({
5151
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
5252
</div>
5353

54-
{state.errors?.customerId ? (
55-
<div
56-
id="customer-error"
57-
aria-live="polite"
58-
className="mt-2 text-sm text-red-500"
59-
>
60-
{state.errors.customerId.map((error: string) => (
61-
<p key={error}>{error}</p>
54+
<div id="customer-error" aria-live="polite" aria-atomic="true">
55+
{state.errors?.customerId &&
56+
state.errors.customerId.map((error: string) => (
57+
<p className="mt-2 text-sm text-red-500" key={error}>
58+
{error}
59+
</p>
6260
))}
63-
</div>
64-
) : null}
61+
</div>
6562
</div>
6663

6764
{/* Invoice Amount */}
@@ -84,17 +81,14 @@ export default function EditInvoiceForm({
8481
</div>
8582
</div>
8683

87-
{state.errors?.amount ? (
88-
<div
89-
id="amount-error"
90-
aria-live="polite"
91-
className="mt-2 text-sm text-red-500"
92-
>
93-
{state.errors.amount.map((error: string) => (
94-
<p key={error}>{error}</p>
84+
<div id="amount-error" aria-live="polite" aria-atomic="true">
85+
{state.errors?.amount &&
86+
state.errors.amount.map((error: string) => (
87+
<p className="mt-2 text-sm text-red-500" key={error}>
88+
{error}
89+
</p>
9590
))}
96-
</div>
97-
) : null}
91+
</div>
9892
</div>
9993

10094
{/* Invoice Status */}
@@ -138,24 +132,21 @@ export default function EditInvoiceForm({
138132
</div>
139133
</div>
140134
</div>
141-
{state.errors?.status ? (
142-
<div
143-
aria-describedby="status-error"
144-
aria-live="polite"
145-
className="mt-2 text-sm text-red-500"
146-
>
147-
{state.errors.status.map((error: string) => (
148-
<p key={error}>{error}</p>
135+
<div id="status-error" aria-live="polite" aria-atomic="true">
136+
{state.errors?.status &&
137+
state.errors.status.map((error: string) => (
138+
<p className="mt-2 text-sm text-red-500" key={error}>
139+
{error}
140+
</p>
149141
))}
150-
</div>
151-
) : null}
142+
</div>
152143
</fieldset>
153144

154-
{state.message ? (
155-
<div aria-live="polite" className="my-2 text-sm text-red-500">
156-
<p>{state.message}</p>
157-
</div>
158-
) : null}
145+
<div aria-live="polite" aria-atomic="true">
146+
{state.message ? (
147+
<p className="my-2 text-sm text-red-500">{state.message}</p>
148+
) : null}
149+
</div>
159150
</div>
160151
<div className="mt-6 flex justify-end gap-4">
161152
<Link

‎dashboard/final-example/app/ui/login-form.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,15 @@ export default function LoginForm() {
6262
</div>
6363
</div>
6464
<LoginButton />
65-
<div className="flex h-8 items-end space-x-1">
65+
<div
66+
className="flex h-8 items-end space-x-1"
67+
aria-live="polite"
68+
aria-atomic="true"
69+
>
6670
{state === 'CredentialsSignin' && (
6771
<>
6872
<ExclamationCircleIcon className="h-5 w-5 text-red-500" />
69-
<p aria-live="polite" className="text-sm text-red-500">
70-
Invalid credentials
71-
</p>
73+
<p className="text-sm text-red-500">Invalid credentials</p>
7274
</>
7375
)}
7476
</div>

0 commit comments

Comments
 (0)