fix: now the error message in highlight form will alert assistive tech (

#2008)
open-sauced · Oct 26, 2023 · a0d4b3b · a0d4b3b
1 parent 967cd4f
commit a0d4b3b
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -526,11 +526,13 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           </DialogHeader>
           <DialogCloseButton onClick={() => setIsDivFocused(false)} />
           <form onSubmit={handlePostHighlight} className="flex flex-col gap-4 font-normal">
-            {errorMsg && (
-              <p className="inline-flex items-center gap-2 px-2 py-1 text-red-500 bg-red-100 border border-red-500 rounded-md w-full text-sm">
-                <MdError size={20} /> {errorMsg}
-              </p>
-            )}
+            <p role="alert">
+              {errorMsg && (
+                <span className="inline-flex items-center gap-2 px-2 py-1 text-red-500 bg-red-100 border border-red-500 rounded-md w-full text-sm">
+                  <MdError size={20} /> {errorMsg}
+                </span>
+              )}
+            </p>
             <div className="flex flex-col gap-2 p-2 overflow-hidden text-sm bg-white border rounded-lg">
               <TypeWriterTextArea
                 className={`resize-y min-h-[80px] max-h-99 font-normal placeholder:text-slate-400 text-light-slate-12 placeholder:font-normal placeholder:text-sm transition focus:outline-none rounded-lg ${