[a11y] WCAG 4.1.2 — add label prop to Button primitive and enforce accessible names

src/lib/components/standalone-activities/start-activity-button.svelte

@@ -45,6 +45,7 @@
     variant="ghost"
     class="start-button"
     leadingIcon="lightning-bolt"
+    label={translate('standalone-activities.start-activity-like-this-one')}
     on:click={() => goto(href)}
   ></Button>
 </Tooltip>

src/lib/components/workflow/start-workflow-button.svelte

@@ -31,6 +31,7 @@
     variant="ghost"
     class="start-button"
     leadingIcon="lightning-bolt"
+    label={translate('workflows.start-workflow-like-this-one')}
     on:click={() => goto(href)}
     {...$$restProps}
   ></Button>

src/lib/components/workflow/workflows-summary-configurable-table.svelte

@@ -296,6 +296,9 @@
           size="xs"
           variant="ghost"
           leadingIcon={dense ? 'table-dense' : 'table-comfy'}
+          label={dense
+            ? translate('common.dense')
+            : translate('common.comfortable')}
         ></Button>
       </Tooltip>
       <Tooltip text={translate('common.download-json')} top>
@@ -304,16 +307,18 @@
           data-testid="export-history-button"
           size="xs"
           variant="ghost"
+          label={translate('common.download-json')}
         >
           <Icon name="download" />
         </Button>
       </Tooltip>
-      <Tooltip text="Configure Columns" top>
+      <Tooltip text={translate('common.configure-columns')} top>
         <Button
           on:click={onClickConfigure}
           data-testid="workflows-summary-table-configuration-button"
           size="xs"
           variant="ghost"
+          label={translate('common.configure-columns')}
         >
           <Icon name="settings" />
         </Button>

src/lib/holocene/button.svelte

@@ -60,6 +60,7 @@
     'data-testid'?: string;
     class?: string;
     disableTracking?: boolean;
+    label?: string;
   };
 
   // Prevent Svelte 5 event handler props - use on:click instead
@@ -92,6 +93,7 @@
   } from 'svelte/elements';
 
   import { cva, type VariantProps } from 'class-variance-authority';
+  import { onMount } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
 
   import { goto } from '$app/navigation';
@@ -115,9 +117,35 @@
   export let target: string = null;
   export let disableTracking = false;
 
+  export let label: string | undefined = undefined;
+
   let className = '';
   export { className as class };
 
+  let buttonElement: HTMLElement | undefined;
+
+  onMount(() => {
+    if (!buttonElement) return;
+    const hasName =
+      Boolean(label) ||
+      Boolean($$restProps['aria-label']) ||
+      Boolean($$restProps['aria-labelledby']) ||
+      Boolean($$restProps['title']) ||
+      Boolean(buttonElement.textContent?.trim()) ||
+      Boolean(leadingIcon) ||
+      Boolean(trailingIcon) ||
+      count > 0;
+    if (!hasName) {
+      const message =
+        'Button primitive rendered without an accessible name. Provide `label`, slot text, `leadingIcon`, `trailingIcon`, or `aria-label`. See 4.1.2-button-anchor-empty.md.';
+      if (import.meta.env.DEV) {
+        throw new Error(message);
+      } else {
+        console.error(message, buttonElement);
+      }
+    }
+  });
+
   const onLinkClick = (e: MouseEvent) => {
     // Skip if middle mouse click or new tab
     if (e.button === 1 || target || e.metaKey) return;
@@ -137,10 +165,12 @@
 
 {#if href && !disabled}
   <a
+    bind:this={buttonElement}
     {href}
     {id}
     role="button"
     type="button"
+    aria-label={label}
     target={target ? '_blank' : null}
     rel={target ? 'noreferrer' : null}
     data-variant={variant}
@@ -180,9 +210,11 @@
   </a>
 {:else}
   <button
+    bind:this={buttonElement}
     {disabled}
     {id}
     type="button"
+    aria-label={label}
     on:click|stopPropagation
     on:keydown|stopPropagation
     data-variant={variant}

src/lib/i18n/locales/en/common.ts

@@ -227,4 +227,5 @@ export const Strings = {
   'change-log': 'Change Log',
   comfortable: 'Comfortable',
   dense: 'Dense',
+  'configure-columns': 'Configure Columns',
 } as const;

src/lib/pages/schedule-view.svelte

@@ -382,6 +382,7 @@
             size="xs"
             variant="ghost"
             leadingIcon="retry"
+            label={translate('common.refresh')}
             on:click={() => {
               scheduleFetch = fetchSchedule(parameters);
               $refresh = Date.now();

src/lib/pages/schedules.svelte

@@ -191,12 +191,13 @@
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="actions-end-additional">
-      <Tooltip text="Configure Columns" top>
+      <Tooltip text={translate('common.configure-columns')} top>
         <Button
           on:click={openCustomizationDrawer}
           data-testid="workflows-summary-table-configuration-button"
           size="xs"
           variant="ghost"
+          label={translate('common.configure-columns')}
         >
           <Icon name="settings" />
         </Button>