feat(forms): mark required fields with asterisk

Author: Joshua Stübner

packages/forms-svelte/package.json

@@ -7,7 +7,7 @@
         "forms",
         "svelte"
     ],
-    "version": "1.0.5",
+    "version": "1.1.0",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",

packages/forms-svelte/src/lib/components/InputFields/CheckboxInput.svelte

@@ -22,13 +22,13 @@ let {
 
 <div class="nc-cluster | nc-input-field | nc-checkbox-wrapper">
     <label for={id} class="nc-stack" data-label>
-        <span class="nc-input-label">{label}
+        <span>{label}
+            {#if required}
+                <span class="nc-input-required-mark">
+                    *
+                </span>
+            {/if}
         </span>
-        {#if !required}
-            <span class="nc-hint">
-                (optional)
-            </span>
-        {/if}
 
         {#if hint}<span class="nc-input-hint">{hint}</span>{/if}
         {#if errors?.length > 0}
@@ -43,6 +43,7 @@ let {
         {id}
         {name}
         {required}
+        aria-required={required}
         type={'checkbox'}
         {checked}
         {value}

packages/forms-svelte/src/lib/components/InputFields/CheckboxInputField.svelte

@@ -38,12 +38,14 @@ const handleChange: FormEventHandler<HTMLFieldSetElement> = event => {
 
 <fieldset class="nc-fieldset nc-input-field nc-checkbox-field" onchange={handleChange}>
     <legend class="nc-legend nc-stack">
-        <span class="nc-input-label" {id}>{label}</span>
-        {#if !required}
-            <span class="nc-hint">
-                (optional)
+        <span class="nc-input-label" {id}><span>{label}
+                {#if required}
+                    <span class="nc-input-required-mark">
+                        *
+                    </span>
+                {/if}
             </span>
-        {/if}
+        </span>
 
         {#if hint}
             <span class="nc-hint" id={`${id}-hint`}>{hint}</span>
@@ -72,6 +74,7 @@ const handleChange: FormEventHandler<HTMLFieldSetElement> = event => {
                 checked={value?.includes(option.value)}
                 {name}
                 {required}
+                aria-required={required}
                 {...rest}
             />
         </div>

packages/forms-svelte/src/lib/components/InputFields/DateInput.svelte

@@ -45,6 +45,7 @@ let internalValue = $derived(value ? formatDate(value) : '');
         value={internalValue}
         oninput={handleInput}
         {required}
+        aria-required={required}
         {...rest}
     />
     <button type="button" class="nc-button" onclick={setToday}>Heute</button>

packages/forms-svelte/src/lib/components/InputFields/DateTimeInput.svelte

@@ -22,8 +22,6 @@ let {
 
 const handleDateInput: FormEventHandler<HTMLInputElement> = event => {
     const target = event.target as HTMLInputElement;
-
-    console.log(target.value);
     value = new Date(target.value);
 };
 
@@ -47,6 +45,7 @@ let internalDate = $derived(value ? formatDate(value) : '');
             type="datetime-local"
             value={value}
             {required}
+            aria-required={required}
             {...rest}
         />
     </div>

packages/forms-svelte/src/lib/components/InputFields/GenericInput.svelte

@@ -35,5 +35,6 @@ const handleInput: FormEventHandler<HTMLInputElement> = event => {
     {type}
     {value}
     oninput={handleInput}
+    aria-required={required}
     {...rest}
 />

packages/forms-svelte/src/lib/components/InputFields/ImageInput.svelte

@@ -94,6 +94,7 @@ const handleInput: FormEventHandler<HTMLInputElement> = async event => {
             {id}
             {name}
             {required}
+            aria-readonly={required}
             oninput={handleInput}
             {...rest}
         />

packages/forms-svelte/src/lib/components/InputFields/InputWrapper.svelte

@@ -14,13 +14,13 @@ let {
 
 <div class="nc-input-field">
     <label for={id} class="nc-stack">
-        <span class="nc-input-label">{label}
+        <span>{label}
+            {#if required}
+                <span class="nc-input-required-mark">
+                    *
+                </span>
+            {/if}
         </span>
-        {#if !required}
-            <span class="nc-hint">
-                (optional)
-            </span>
-        {/if}
 
         {#if hint}<span class="nc-hint">{hint}</span>{/if}
         {#if errors?.length > 0}

packages/forms-svelte/src/lib/components/InputFields/RadioInputField.svelte

@@ -30,12 +30,15 @@ const handleChange: FormEventHandler<HTMLFieldSetElement> = event => {
 
 <fieldset class="nc-fieldset nc-input-field nc-radio-field" onchange={handleChange}>
     <legend class="nc-legend nc-stack">
-        <span class="nc-input-label" {id}>{label}
+        <span class="nc-input-label" {id}>
+            <span>{label}
+                {#if required}
+                    <span class="nc-input-required-mark">
+                        *
+                    </span>
+                {/if}
+            </span>
         </span>
-        {#if !required}
-            <span class="nc-hint">(optional)</span>
-        {/if}
-
         {#if hint}
             <span class="nc-hint" id={`${id}-hint`}>{hint}</span>
         {/if}

packages/forms-svelte/src/lib/components/InputFields/RangeInput.svelte

@@ -34,6 +34,7 @@ const handleInput: FormEventHandler<HTMLInputElement> = event => {
         {id}
         {name}
         {required}
+        aria-readonly={required}
         {autocomplete}
         {type}
         {value}