From b12d61a1c6d5f793400ae9ae6f4641c3f3c144b0 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Mon, 5 Dec 2022 15:02:11 +0900
Subject: feat: Support errors, add aria when errors or errorText

---
 code/app/src/lib/components/textarea.svelte | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'code/app/src/lib/components/textarea.svelte')

diff --git a/code/app/src/lib/components/textarea.svelte b/code/app/src/lib/components/textarea.svelte
index 6629260..0f2c665 100644
--- a/code/app/src/lib/components/textarea.svelte
+++ b/code/app/src/lib/components/textarea.svelte
@@ -11,8 +11,12 @@
     export let label = "";
     export let required = false;
     export let errorText = "";
+    export let errors: Array<string> | undefined = undefined;
 
+    $: ariaErrorDescribedBy = id + "__" + "error";
     $: attributes = {
+        "aria-describedby": errorText || errors?.length ? ariaErrorDescribedBy : null,
+        "aria-invalid": errorText || errors?.length ? "true" : null,
         rows: rows || null,
         cols: cols || null,
         name: name || null,
@@ -25,7 +29,7 @@
     let scrollHeight = 0;
     const defaultColorClass = "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
     let colorClass = defaultColorClass;
-    
+
     $: if (errorText) {
         colorClass = "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
     } else {
@@ -62,10 +66,16 @@
             {placeholder}
             class="block w-full rounded-md {colorClass} shadow-sm sm:text-sm"
         />
-        {#if errorText}
-            <p class="mt-2 text-sm text-red-600">
-                {errorText}
+        {#if errorText || errors?.length === 1}
+            <p class="mt-2 text-sm text-red-600" id={ariaErrorDescribedBy}>
+                {errorText ?? errors[0]}
             </p>
+        {:else if errors && errors.length}
+            <ul class="mt-2 list-disc" id={ariaErrorDescribedBy}>
+                {#each errors as error}
+                    <li class="text-sm text-red-600">{error}</li>
+                {/each}
+            </ul>
         {/if}
     </div>
 </div>
-- 
cgit v1.3