Frontend: accessibility and component improvements

Replace div[role=button] with semantic button elements, add missing
aria labels, use label elements for toggle controls, fix a11y
warnings across components, dialogs, editors, and pickers.

Author: stefan-ernst

frontend/src/lib/components/AlertBox.svelte

@@ -2,13 +2,16 @@
   import { AlertCircle, CircleCheck, Info, AlertTriangle } from 'lucide-svelte';
 
   let {
-    variant = 'error', // 'error', 'warning', 'info', 'success', 'neutral'
+    variant: variantProp = 'error', // 'error', 'warning', 'info', 'success', 'neutral'
+    type = undefined,               // Alias for variant
     message = '',
     showIcon = true,
     class: className = '',
-    children
+    children = undefined
   } = $props();
 
+  const variant = $derived(type || variantProp);
+
   const styles = $derived({
     error: {
       borderColor: 'var(--ds-border-danger)',

frontend/src/lib/components/Avatar.svelte

@@ -74,16 +74,29 @@
 </script>
 
 {#if src}
-  <img
-    {src}
-    alt={computedAlt}
-    class="{baseClasses} object-cover"
-    onclick={onclick}
-  />
+  {#if onclick}
+    <button type="button" class="p-0 border-0 bg-transparent cursor-pointer" onclick={onclick}>
+      <img
+        {src}
+        alt={computedAlt}
+        class="{baseClasses} object-cover"
+      />
+    </button>
+  {:else}
+    <img
+      {src}
+      alt={computedAlt}
+      class="{baseClasses} object-cover"
+    />
+  {/if}
 {:else}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class={baseClasses} style={variantStyles[variant]} onclick={onclick}>
-    {initials}
-  </div>
+  {#if onclick}
+    <button type="button" class="appearance-none bg-transparent border-none p-0 m-0 font-[inherit] text-[inherit] cursor-pointer {baseClasses}" style={variantStyles[variant]} onclick={onclick}>
+      {initials}
+    </button>
+  {:else}
+    <div class={baseClasses} style={variantStyles[variant]}>
+      {initials}
+    </div>
+  {/if}
 {/if}

frontend/src/lib/components/Button.svelte

@@ -19,7 +19,7 @@
     onclick = null, // Svelte 5 style click handler
     hotkeyConfig = null, // { key: 'a', guard?: () => boolean }
     class: className = '',
-    children
+    children = undefined
   } = $props();
   export { className as class };
 

frontend/src/lib/components/Card.svelte

@@ -11,8 +11,8 @@
     class: className = '',
     style: userStyle = '',
     children,
-    header,                // Snippet for header content
-    footer                 // Snippet for footer content
+    header = undefined,    // Snippet for header content
+    footer = undefined     // Snippet for footer content
   } = $props();
 
   // Variant styles using design tokens

frontend/src/lib/components/DataTable.svelte

@@ -8,6 +8,7 @@
   export let columns = []; // Array of column definitions: { key, label, width?, align?, sortable? }
   export let data = []; // Array of data objects
   export let keyField = 'id'; // Field to use as unique key
+  export let loading = false; // Loading state
   export let emptyMessage = '';
   export let emptyDescription = ''; // Optional description for empty state
   export let emptyIcon = null; // Lucide icon component

frontend/src/lib/components/Link.svelte

@@ -12,7 +12,7 @@
    * - Optional onClick for modal/custom behavior while preserving link benefits
    */
 
-  export let href;
+  export let href = '';
   export let active = false;
   export let disabled = false;
   export let onClick = null; // Optional click handler for modals or custom behavior
@@ -25,7 +25,7 @@
   export { className as class };
 
   // Expose the anchor element reference for parent components
-  let anchorElement;
+  let anchorElement = undefined;
   export { anchorElement as element };
 
 

frontend/src/lib/components/ModalBackdrop.svelte

@@ -15,7 +15,7 @@
     transition = true,
     ariaLabelledBy = undefined,
     onclose = undefined,
-    children,
+    children = undefined,
   } = $props();
 
   let backdropRef = $state(null);

frontend/src/lib/components/Pagination.svelte

@@ -15,6 +15,8 @@
   export let pageSizeOptions = [10, 25, 50, 100];
   export let compact = false; // For smaller spaces
   export let hasGradient = false; // Gradient background awareness
+  export let onpageChange = null; // Callback prop (Svelte 5 callers)
+  export let onpageSizeChange = null; // Callback prop (Svelte 5 callers)
 
   // Gradient-aware text styles (using inline styles instead of Tailwind classes)
   $: textStyle = hasGradient ? 'color: var(--ds-text);' : 'color: var(--ds-text);';
@@ -56,13 +58,15 @@
   function goToPage(page) {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       dispatch('pageChange', { page, itemsPerPage });
+      onpageChange?.({ detail: { page, itemsPerPage } });
     }
   }
-  
+
   function handlePageSizeChange(event) {
     const newPageSize = parseInt(event.target.value);
     const newPage = Math.min(currentPage, Math.ceil(Math.min(totalItems, maxItems) / newPageSize));
     dispatch('pageSizeChange', { page: newPage, itemsPerPage: newPageSize });
+    onpageSizeChange?.({ detail: { page: newPage, itemsPerPage: newPageSize } });
   }
 </script>
 
@@ -80,7 +84,7 @@
 
       {#if showPageSizes && !compact}
         <div class="flex items-center gap-2 text-sm" style={textStyle}>
-          <label>{t('components.pagination.itemsPerPage')}</label>
+          <span>{t('components.pagination.itemsPerPage')}</span>
           <div style="min-width: 100px;">
             <BasePicker
               value={itemsPerPage}

frontend/src/lib/components/Tabs.svelte

@@ -1,5 +1,5 @@
 <script>
-  let { tabs = [], activeTab = $bindable(''), onTabChange = null, children } = $props();
+  let { tabs = [], activeTab = $bindable(''), onTabChange = null, type = 'default', children } = $props();
 
   // Initialize activeTab to first tab if not set
   $effect(() => {

frontend/src/lib/components/Toggle.svelte

@@ -26,9 +26,8 @@
 </script>
 
 {#if label}
-  <div
+  <label
     class="inline-flex items-center gap-3 {labelPosition === 'left' ? 'flex-row-reverse' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
-    role="group"
   >
     <button
       type="button"
@@ -46,12 +45,13 @@
       ></span>
     </button>
     <span class="text-sm text-[var(--ds-text)]">{label}</span>
-  </div>
+  </label>
 {:else}
   <button
     type="button"
     role="switch"
     aria-checked={checked}
+    aria-label="Toggle"
     {disabled}
     class="relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--ds-border-focused)]
            disabled:opacity-50 disabled:cursor-not-allowed {currentSize.button} {className}"