diff options
Diffstat (limited to 'code/app/src/lib/components/textarea.svelte')
| -rw-r--r-- | code/app/src/lib/components/textarea.svelte | 18 |
1 files changed, 14 insertions, 4 deletions
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> |