rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Form Error Accessibility (#450)

Browse Source
This commit is contained in:
Delba de Oliveira
2023-11-16 14:27:20 +00:00
committed by GitHub
parent 0a3dda242c
commit 45fcde471b
3 changed files with 58 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
dashboard/final-example/app/ui/invoices/create-form.tsx
View File

@@ -44,17 +44,14 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
</div>
{state.errors?.customerId ? (
<div
id="customer-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.customerId.map((error: string) => (
<p key={error}>{error}</p>
<div id="customer-error" aria-live="polite" aria-atomic="true">
{state.errors?.customerId &&
state.errors.customerId.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
) : null}
</div>
</div>
{/* Invoice Amount */}
@@ -77,17 +74,14 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
</div>
</div>
{state.errors?.amount ? (
<div
id="amount-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.amount.map((error: string) => (
<p key={error}>{error}</p>
<div id="amount-error" aria-live="polite" aria-atomic="true">
{state.errors?.amount &&
state.errors.amount.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
) : null}
</div>
</div>
{/* Invoice Status */}
@@ -129,24 +123,21 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
</div>
</div>
</div>
{state.errors?.status ? (
<div
aria-describedby="status-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.status.map((error: string) => (
<p key={error}>{error}</p>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.status &&
state.errors.status.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
) : null}
</div>
</fieldset>
{state.message ? (
<div aria-live="polite" className="my-2 text-sm text-red-500">
<p>{state.message}</p>
</div>
) : null}
<div aria-live="polite" aria-atomic="true">
{state.message ? (
<p className="mt-2 text-sm text-red-500">{state.message}</p>
) : null}
</div>
</div>
<div className="mt-6 flex justify-end gap-4">
<Link

61
dashboard/final-example/app/ui/invoices/edit-form.tsx
View File

@@ -51,17 +51,14 @@ export default function EditInvoiceForm({
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
</div>
{state.errors?.customerId ? (
<div
id="customer-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.customerId.map((error: string) => (
<p key={error}>{error}</p>
<div id="customer-error" aria-live="polite" aria-atomic="true">
{state.errors?.customerId &&
state.errors.customerId.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
) : null}
</div>
</div>
{/* Invoice Amount */}
@@ -84,17 +81,14 @@ export default function EditInvoiceForm({
</div>
</div>
{state.errors?.amount ? (
<div
id="amount-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.amount.map((error: string) => (
<p key={error}>{error}</p>
<div id="amount-error" aria-live="polite" aria-atomic="true">
{state.errors?.amount &&
state.errors.amount.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
) : null}
</div>
</div>
{/* Invoice Status */}
@@ -138,24 +132,21 @@ export default function EditInvoiceForm({
</div>
</div>
</div>
{state.errors?.status ? (
<div
aria-describedby="status-error"
aria-live="polite"
className="mt-2 text-sm text-red-500"
>
{state.errors.status.map((error: string) => (
<p key={error}>{error}</p>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.status &&
state.errors.status.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
) : null}
</div>
</fieldset>
{state.message ? (
<div aria-live="polite" className="my-2 text-sm text-red-500">
<p>{state.message}</p>
</div>
) : null}
<div aria-live="polite" aria-atomic="true">
{state.message ? (
<p className="my-2 text-sm text-red-500">{state.message}</p>
) : null}
</div>
</div>
<div className="mt-6 flex justify-end gap-4">
<Link

10
dashboard/final-example/app/ui/login-form.tsx
View File

@@ -62,13 +62,15 @@ export default function LoginForm() {
</div>
</div>
<LoginButton />
<div className="flex h-8 items-end space-x-1">
<div
className="flex h-8 items-end space-x-1"
aria-live="polite"
aria-atomic="true"
>
{state === 'CredentialsSignin' && (
<>
<ExclamationCircleIcon className="h-5 w-5 text-red-500" />
<p aria-live="polite" className="text-sm text-red-500">
Invalid credentials
</p>
<p className="text-sm text-red-500">Invalid credentials</p>
</>
)}
</div>