feat: Support errors, add aria when errors or errorText

2 files changed, 17 insertions, 6 deletions

diff --git a/code/app/src/lib/components/input.svelte b/code/app/src/lib/components/input.svelte
index ac01348..80b1543 100644
--- a/code/app/src/lib/components/input.svelte
+++ b/code/app/src/lib/components/input.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
+    import { error } from "@sveltejs/kit";
     import { ExclamationCircleIcon } from "./icons";
 
     export let label: string | undefined = undefined;
@@ -24,8 +25,8 @@
 
     $: ariaErrorDescribedBy = id + "__" + "error";
     $: attributes = {
-        "aria-describedby": errorText ? ariaErrorDescribedBy : null,
-        "aria-invalid": errorText ? "true" : null,
+        "aria-describedby": errorText || errors?.length ? ariaErrorDescribedBy : null,
+        "aria-invalid": errorText || errors?.length ? "true" : null,
         disabled: disabled || null,
         autocomplete: autocomplete || null,
         required: required || null,
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>