Unify UI workflows and streamline fleet management

src/lib/ui/components/primitives/Input.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { getContext } from 'svelte';
+    import { fieldContext, type FieldContext } from '../../field-context.js';
+    const field = getContext<FieldContext | undefined>(fieldContext);
     interface Props {
         value?: string;
         type?: 'text' | 'search' | 'email' | 'number' | 'url' | 'password' | 'file';
@@ -13,6 +16,7 @@
         onchange?: (e: Event) => void;
         oninput?: (e: Event) => void;
         accept?: string;
+        ariaLabel?: string;
     }
 
     let {
@@ -28,7 +32,8 @@
         mono = false,
         onchange,
         oninput,
-        accept
+        accept,
+        ariaLabel
     }: Props = $props();
 </script>
 
@@ -44,6 +49,10 @@
     {readonly}
     {autocomplete}
     {accept}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabel ? undefined : field?.labelId}
+    aria-describedby={field?.messageId}
+    aria-invalid={field?.invalid || undefined}
     bind:value
     {onchange}
     {oninput}