From 45fcde471b8150ae22b48d3a803342c6aa4f0108 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Thu, 16 Nov 2023 14:27:20 +0000
Subject: [PATCH] Improve Form Error Accessibility  (#450)

---
 .../app/ui/invoices/create-form.tsx           | 61 ++++++++-----------
 .../app/ui/invoices/edit-form.tsx             | 61 ++++++++-----------
 dashboard/final-example/app/ui/login-form.tsx | 10 +--
 3 files changed, 58 insertions(+), 74 deletions(-)

diff --git a/dashboard/final-example/app/ui/invoices/create-form.tsx b/dashboard/final-example/app/ui/invoices/create-form.tsx
index 715ff71..cdbc406 100644
--- a/dashboard/final-example/app/ui/invoices/create-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/create-form.tsx
@@ -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
diff --git a/dashboard/final-example/app/ui/invoices/edit-form.tsx b/dashboard/final-example/app/ui/invoices/edit-form.tsx
index d2647f7..d39da4c 100644
--- a/dashboard/final-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/edit-form.tsx
@@ -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
diff --git a/dashboard/final-example/app/ui/login-form.tsx b/dashboard/final-example/app/ui/login-form.tsx
index 9e2f983..d1422e7 100644
--- a/dashboard/final-example/app/ui/login-form.tsx
+++ b/dashboard/final-example/app/ui/login-form.tsx
@@ -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>