@happyvertical/smrt-ui 0.30.0 → 0.31.0

package/dist/components/feedback/ConfirmDialog.svelte

@@ -5,7 +5,14 @@
  *
  * Provides a consistent confirmation dialog for destructive actions
  * or important decisions.
+ *
+ * Accessibility (#1586): the dialog is a `role="dialog" aria-modal="true"`
+ * surface with managed focus — on open it records the previously-focused element
+ * and moves focus to the confirm button; Tab/Shift+Tab are trapped within the
+ * dialog; Escape (caught at the document level while open) cancels; and focus is
+ * restored to the opener when the dialog closes.
  */
+import { tick } from 'svelte';
 import { ripple } from '../../actions/ripple.js';
 
 /** Props for ConfirmDialog component */
@@ -42,33 +49,101 @@ const {
   oncancel,
 }: Props = $props();
 
+let backdropEl = $state<HTMLElement | null>(null);
+let confirmBtnEl = $state<HTMLButtonElement | null>(null);
+// The element focused before the dialog opened, restored on close.
+let previouslyFocused: HTMLElement | null = null;
+
+function focusableEls(): HTMLElement[] {
+  if (!backdropEl) return [];
+  return Array.from(
+    backdropEl.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+}
+
+// Move focus into the dialog on open; restore it to the opener on close.
+$effect(() => {
+  if (typeof document === 'undefined') return;
+
+  if (open) {
+    previouslyFocused = document.activeElement as HTMLElement | null;
+    // Wait for the dialog DOM to mount, then move focus into the dialog: the
+    // confirm action by default, the first focusable if confirm is disabled, or
+    // the dialog container itself when every control is disabled (loading) so
+    // focus is still contained and Escape stays reachable.
+    void tick().then(() => {
+      if (!open) return;
+      const target = confirmBtnEl?.disabled
+        ? (focusableEls()[0] ?? backdropEl)
+        : confirmBtnEl;
+      target?.focus();
+    });
+  } else if (previouslyFocused) {
+    previouslyFocused.focus();
+    previouslyFocused = null;
+  }
+});
+
 function handleBackdropClick(e: MouseEvent) {
   if (e.target === e.currentTarget) {
     oncancel?.();
   }
 }
 
+// Escape handling lives at the document level (below) so it fires regardless of
+// where focus currently is. This handler, bound to the dialog, only traps Tab.
 function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
+  if (e.key !== 'Tab') return;
+
+  // Trap focus within the dialog so Tab can't escape to the page behind.
+  const focusables = focusableEls();
+  if (focusables.length === 0) {
+    e.preventDefault();
+    return;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = document.activeElement;
+
+  if (e.shiftKey) {
+    if (active === first || !backdropEl?.contains(active)) {
+      e.preventDefault();
+      last.focus();
+    }
+  } else if (active === last || !backdropEl?.contains(active)) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+
+function handleWindowKeydown(e: KeyboardEvent) {
+  if (open && e.key === 'Escape') {
+    e.preventDefault();
     oncancel?.();
   }
 }
 </script>
 
+<svelte:window onkeydown={handleWindowKeydown} />
+
 {#if open}
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
   <div
+    bind:this={backdropEl}
     class="dialog-backdrop"
     role="dialog"
     aria-modal="true"
     aria-labelledby="dialog-title"
+    aria-describedby="dialog-message"
     tabindex="-1"
     onclick={handleBackdropClick}
     onkeydown={handleKeydown}
   >
     <div class="dialog-content">
       <h2 id="dialog-title" class="dialog-title">{title}</h2>
-      <p class="dialog-message">{message}</p>
+      <p id="dialog-message" class="dialog-message">{message}</p>
 
       <div class="dialog-actions">
         <button
@@ -81,6 +156,7 @@ function handleKeydown(e: KeyboardEvent) {
           {cancelLabel}
         </button>
         <button
+          bind:this={confirmBtnEl}
           type="button"
           class="btn btn-filled"
           class:destructive

package/dist/components/feedback/ConfirmDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAaA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAwDD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAoBA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA2HD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/feedback/LoadingOverlay.svelte

@@ -114,7 +114,12 @@ function handleKeydown(e: KeyboardEvent) {
 			{/if}
 
 			{#if error}
-				<p class="error-message">{error.message}</p>
+				<!-- role="alert" (assertive live region) so the failure is announced
+				     to screen readers when it appears (#1586). aria-busy flips to
+				     false on error, so without this the overlay changed visually only. -->
+				<p class="error-message" role="alert" aria-live="assertive">
+					{error.message}
+				</p>
 			{/if}
 
 			{#if dismissible}

package/dist/components/feedback/LoadingOverlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/LoadingOverlay.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH,yCAAyC;AACzC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAiGD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LoadingOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/LoadingOverlay.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH,yCAAyC;AACzC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAoGD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/feedback/__tests__/ConfirmDialog.test.js

@@ -3,10 +3,12 @@
  *
  * ConfirmDialog renders a backdrop `<div role="dialog" aria-modal="true">` only
  * while `open` is true, with a title, message, and cancel/confirm buttons. It
- * exposes `onconfirm`/`oncancel` callbacks; Escape and backdrop clicks both
- * route to `oncancel`.
+ * exposes `onconfirm`/`oncancel` callbacks; Escape (handled at the document
+ * level) and backdrop clicks both route to `oncancel`. On open it manages focus:
+ * focus moves to the confirm button, Tab is trapped within the dialog, and focus
+ * is restored to the opener on close (#1586).
  */
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
@@ -72,6 +74,56 @@ describe('ConfirmDialog', () => {
         await userEvent.click(screen.getByRole('heading', { name: 'Delete item' }));
         expect(oncancel).not.toHaveBeenCalled();
     });
+    describe('focus management (#1586)', () => {
+        it('moves focus to the confirm button when opened', async () => {
+            render(ConfirmDialog, { props: baseProps });
+            await waitFor(() => expect(screen.getByRole('button', { name: 'Confirm' })).toHaveFocus());
+        });
+        it('traps Tab focus within the dialog', async () => {
+            render(ConfirmDialog, { props: baseProps });
+            const confirm = screen.getByRole('button', { name: 'Confirm' });
+            const cancel = screen.getByRole('button', { name: 'Cancel' });
+            await waitFor(() => expect(confirm).toHaveFocus());
+            // Tab from the last focusable (confirm) wraps to the first (cancel).
+            await userEvent.tab();
+            expect(cancel).toHaveFocus();
+            // Shift+Tab from the first focusable (cancel) wraps back to confirm.
+            await userEvent.tab({ shift: true });
+            expect(confirm).toHaveFocus();
+        });
+        it('restores focus to the opener when closed', async () => {
+            // An external trigger holds focus before the dialog opens.
+            const opener = document.createElement('button');
+            opener.textContent = 'Open';
+            document.body.appendChild(opener);
+            opener.focus();
+            expect(opener).toHaveFocus();
+            const { rerender } = render(ConfirmDialog, { props: baseProps });
+            await waitFor(() => expect(screen.getByRole('button', { name: 'Confirm' })).toHaveFocus());
+            await rerender({ ...baseProps, open: false });
+            expect(opener).toHaveFocus();
+            opener.remove();
+        });
+        it('cancels via Escape even when focus is outside the dialog', async () => {
+            const oncancel = vi.fn();
+            const outside = document.createElement('input');
+            document.body.appendChild(outside);
+            render(ConfirmDialog, { props: { ...baseProps, oncancel } });
+            // Move focus out of the dialog, then press Escape: the document-level
+            // handler still fires because the dialog is open.
+            outside.focus();
+            await userEvent.keyboard('{Escape}');
+            expect(oncancel).toHaveBeenCalledTimes(1);
+            outside.remove();
+        });
+        it('focuses the dialog container when all controls are disabled (loading)', async () => {
+            // Both buttons are disabled while loading, so there is no focusable
+            // control; focus falls back to the dialog container (tabindex=-1) to stay
+            // contained and keep Escape reachable.
+            render(ConfirmDialog, { props: { ...baseProps, loading: true } });
+            await waitFor(() => expect(screen.getByRole('dialog')).toHaveFocus());
+        });
+    });
     it('disables both buttons while loading', () => {
         render(ConfirmDialog, { props: { ...baseProps, loading: true } });
         expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();

package/dist/components/feedback/__tests__/LoadingOverlay.test.js

@@ -52,6 +52,20 @@ describe('LoadingOverlay', () => {
         expect(dialog).toHaveAttribute('aria-busy', 'false');
         expect(screen.getByText('Import failed')).toBeInTheDocument();
     });
+    it('announces the error via an assertive alert region (#1586)', () => {
+        // aria-busy flips to false on error, so without a live region the failure
+        // would change visually only and never reach a screen reader.
+        render(LoadingOverlay, {
+            props: { show: true, error: { message: 'Import failed' } },
+        });
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveTextContent('Import failed');
+        expect(alert).toHaveAttribute('aria-live', 'assertive');
+    });
+    it('exposes no alert region while loading without an error (#1586)', () => {
+        render(LoadingOverlay, { props: { show: true, message: 'Working' } });
+        expect(screen.queryByRole('alert')).toBeNull();
+    });
     it('omits the dismiss button unless dismissible', () => {
         render(LoadingOverlay, { props: { show: true } });
         expect(screen.queryByRole('button', { name: 'Continue' })).toBeNull();

package/dist/components/roles/RoleSelector.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
+/**
+ * RoleSelector — a trigger button and a single-select listbox of roles.
+ *
+ * Implements keyboard support per the WAI-ARIA listbox pattern, mirroring the
+ * roving-focus approach in `ui/Dropdown.svelte`: the trigger opens on
+ * ArrowDown/ArrowUp/Enter/Space; the open list moves focus onto the selected
+ * (or first) option; ArrowUp/Down/Home/End move roving focus; Enter/Space pick
+ * the focused option; Escape closes and refocuses the trigger; Tab closes.
+ * Click-outside also dismisses.
+ */
+
 import type { Role } from '@happyvertical/smrt-types';
+import { tick } from 'svelte';
 
 export interface Props {
   roles: Role[];
@@ -20,28 +32,98 @@ const {
 }: Props = $props();
 
 let open = $state(false);
+let wrapEl = $state<HTMLElement | null>(null);
+let triggerEl = $state<HTMLButtonElement | null>(null);
+let optionEls = $state<Array<HTMLButtonElement | null>>([]);
 const selectedRole = $derived(roles.find((r) => r.id === value));
 
+async function openList() {
+  if (disabled || roles.length === 0) return;
+  open = true;
+  await tick();
+  // Focus the selected option if there is one, otherwise the first.
+  const selectedIndex = roles.findIndex((r) => r.id === value);
+  const target = selectedIndex >= 0 ? selectedIndex : 0;
+  optionEls[target]?.focus();
+}
+
+function closeList(refocus = true) {
+  open = false;
+  if (refocus) triggerEl?.focus();
+}
+
 function handleSelect(roleId: string) {
   onchange(roleId);
-  open = false;
+  closeList();
 }
 
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
-    open = false;
+function focusByOffset(offset: number) {
+  if (roles.length === 0) return;
+  const current = optionEls.indexOf(
+    document.activeElement as HTMLButtonElement | null,
+  );
+  const from = current < 0 ? 0 : current;
+  const next = (from + offset + roles.length) % roles.length;
+  optionEls[next]?.focus();
+}
+
+function onTriggerKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    openList();
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    openList();
   }
 }
-</script>
 
-<svelte:window onkeydown={handleKeydown} />
+function onListKeydown(e: KeyboardEvent) {
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      focusByOffset(1);
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      focusByOffset(-1);
+      break;
+    case 'Home':
+      e.preventDefault();
+      optionEls[0]?.focus();
+      break;
+    case 'End':
+      e.preventDefault();
+      optionEls[roles.length - 1]?.focus();
+      break;
+    case 'Escape':
+      e.preventDefault();
+      closeList();
+      break;
+    case 'Tab':
+      closeList(false);
+      break;
+  }
+}
 
-<div class="role-selector" class:disabled>
+// Dismiss on outside click while open.
+$effect(() => {
+  if (!open) return;
+  const onDocPointer = (event: MouseEvent) => {
+    if (wrapEl && !wrapEl.contains(event.target as Node)) closeList(false);
+  };
+  document.addEventListener('click', onDocPointer, true);
+  return () => document.removeEventListener('click', onDocPointer, true);
+});
+</script>
+
+<div class="role-selector" class:disabled bind:this={wrapEl}>
   <button
+    bind:this={triggerEl}
     type="button"
     class="trigger"
     class:open
-    onclick={() => (open = !open)}
+    onclick={() => (open ? closeList(false) : openList())}
+    onkeydown={onTriggerKeydown}
     {disabled}
     aria-haspopup="listbox"
     aria-expanded={open}
@@ -56,7 +138,7 @@ function handleKeydown(e: KeyboardEvent) {
     {:else}
       <span class="placeholder">{placeholder}</span>
     {/if}
-    <svg class="chevron" viewBox="0 0 20 20" fill="currentColor">
+    <svg class="chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
       <path
         fill-rule="evenodd"
         d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
@@ -66,14 +148,23 @@ function handleKeydown(e: KeyboardEvent) {
   </button>
 
   {#if open}
-    <div class="dropdown" role="listbox">
-      {#each roles as role (role.id)}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div
+      class="dropdown"
+      role="listbox"
+      tabindex={-1}
+      aria-label={placeholder}
+      onkeydown={onListKeydown}
+    >
+      {#each roles as role, i (role.id)}
         <button
+          bind:this={optionEls[i]}
           type="button"
           class="option"
           class:selected={role.id === value}
           onclick={() => handleSelect(role.id!)}
           role="option"
+          tabindex={-1}
           aria-selected={role.id === value}
         >
           <div class="option-content">
@@ -115,7 +206,7 @@ function handleKeydown(e: KeyboardEvent) {
     text-align: left;
   }
 
-  .trigger:focus {
+  .trigger:focus-visible {
     outline: none;
     border-color: var(--smrt-color-primary, #005ac1);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
@@ -179,8 +270,10 @@ function handleKeydown(e: KeyboardEvent) {
     text-align: left;
   }
 
-  .option:hover {
+  .option:hover,
+  .option:focus-visible {
     background: var(--smrt-color-surface-container-high, #f3f4f6);
+    outline: none;
   }
 
   .option.selected {

package/dist/components/roles/RoleSelector.svelte.d.ts

@@ -1,3 +1,13 @@
+/**
+ * RoleSelector — a trigger button and a single-select listbox of roles.
+ *
+ * Implements keyboard support per the WAI-ARIA listbox pattern, mirroring the
+ * roving-focus approach in `ui/Dropdown.svelte`: the trigger opens on
+ * ArrowDown/ArrowUp/Enter/Space; the open list moves focus onto the selected
+ * (or first) option; ArrowUp/Down/Home/End move roving focus; Enter/Space pick
+ * the focused option; Escape closes and refocuses the trigger; Tab closes.
+ * Click-outside also dismisses.
+ */
 import type { Role } from '@happyvertical/smrt-types';
 export interface Props {
     roles: Role[];

package/dist/components/roles/RoleSelector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoleSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/roles/RoleSelector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuED,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"RoleSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/roles/RoleSelector.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+ID,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/roles/__tests__/RoleSelector.test.js

@@ -0,0 +1,134 @@
+/**
+ * Component test for RoleSelector (#1586 remediation, epic #1354).
+ *
+ * RoleSelector is a single-select listbox: a trigger button (`aria-haspopup`/
+ * `aria-expanded`) opens a `role="listbox"` of `role="option"` buttons. This
+ * suite covers the keyboard support added to match the WAI-ARIA listbox pattern
+ * (mirroring `ui/Dropdown.svelte`): open on Enter/ArrowDown, focus-into-list,
+ * Arrow/Home/End roving focus, Enter to select, and Escape to close + refocus
+ * the trigger. Axe-cleanliness is asserted for both open and closed states.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import RoleSelector from '../RoleSelector.svelte';
+function role(id, name, isSystem = false) {
+    return {
+        id,
+        slug: id,
+        created_at: null,
+        updated_at: null,
+        tenantId: null,
+        name,
+        description: `${name} role`,
+        isSystem,
+    };
+}
+const ROLES = [
+    role('admin', 'Admin', true),
+    role('editor', 'Editor'),
+    role('viewer', 'Viewer'),
+];
+describe('RoleSelector', () => {
+    it('exposes a collapsed listbox trigger by default', () => {
+        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
+        const trigger = screen.getByRole('button');
+        expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
+        expect(trigger).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByRole('listbox')).toBeNull();
+    });
+    it('shows the placeholder when no role is selected', () => {
+        render(RoleSelector, {
+            props: { roles: ROLES, onchange: vi.fn(), placeholder: 'Pick one' },
+        });
+        expect(screen.getByText('Pick one')).toBeInTheDocument();
+    });
+    it('opens via click and exposes the options as a listbox', async () => {
+        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
+        await userEvent.click(screen.getByRole('button'));
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+        expect(screen.getAllByRole('option')).toHaveLength(3);
+    });
+    it('opens on Enter and moves focus onto the first option', async () => {
+        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
+        screen.getByRole('button').focus();
+        await userEvent.keyboard('{Enter}');
+        const options = screen.getAllByRole('option');
+        expect(options[0]).toHaveFocus();
+    });
+    it('opens on ArrowDown and focuses the already-selected option', async () => {
+        render(RoleSelector, {
+            props: { roles: ROLES, value: 'viewer', onchange: vi.fn() },
+        });
+        screen.getByRole('button').focus();
+        await userEvent.keyboard('{ArrowDown}');
+        const viewer = screen.getByRole('option', { name: /Viewer/ });
+        expect(viewer).toHaveFocus();
+    });
+    it('roves focus with ArrowDown/ArrowUp and wraps at the ends', async () => {
+        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
+        screen.getByRole('button').focus();
+        await userEvent.keyboard('{Enter}'); // focuses option 0 (Admin)
+        const options = screen.getAllByRole('option');
+        await userEvent.keyboard('{ArrowDown}');
+        expect(options[1]).toHaveFocus();
+        await userEvent.keyboard('{ArrowDown}');
+        expect(options[2]).toHaveFocus();
+        await userEvent.keyboard('{ArrowDown}'); // wraps to first
+        expect(options[0]).toHaveFocus();
+        await userEvent.keyboard('{ArrowUp}'); // wraps to last
+        expect(options[2]).toHaveFocus();
+    });
+    it('jumps to the first/last option with Home/End', async () => {
+        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
+        screen.getByRole('button').focus();
+        await userEvent.keyboard('{Enter}');
+        const options = screen.getAllByRole('option');
+        await userEvent.keyboard('{End}');
+        expect(options[2]).toHaveFocus();
+        await userEvent.keyboard('{Home}');
+        expect(options[0]).toHaveFocus();
+    });
+    it('selects the focused option with Enter and fires onchange', async () => {
+        const onchange = vi.fn();
+        render(RoleSelector, { props: { roles: ROLES, onchange } });
+        screen.getByRole('button').focus();
+        await userEvent.keyboard('{Enter}'); // open, focus Admin
+        await userEvent.keyboard('{ArrowDown}'); // focus Editor
+        await userEvent.keyboard('{Enter}'); // select Editor
+        expect(onchange).toHaveBeenCalledWith('editor');
+        expect(screen.queryByRole('listbox')).toBeNull();
+    });
+    it('closes on Escape and restores focus to the trigger', async () => {
+        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
+        const trigger = screen.getByRole('button');
+        trigger.focus();
+        await userEvent.keyboard('{Enter}');
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+        await userEvent.keyboard('{Escape}');
+        expect(screen.queryByRole('listbox')).toBeNull();
+        expect(trigger).toHaveFocus();
+    });
+    it('does not open when disabled', async () => {
+        render(RoleSelector, {
+            props: { roles: ROLES, onchange: vi.fn(), disabled: true },
+        });
+        const trigger = screen.getByRole('button');
+        await userEvent.click(trigger);
+        expect(screen.queryByRole('listbox')).toBeNull();
+    });
+    it('is axe-clean when closed', async () => {
+        const { container } = render(RoleSelector, {
+            props: { roles: ROLES, value: 'admin', onchange: vi.fn() },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean when open', async () => {
+        const { container } = render(RoleSelector, {
+            props: { roles: ROLES, onchange: vi.fn(), showDescription: true },
+        });
+        await userEvent.click(screen.getByRole('button'));
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/Button.svelte

@@ -139,8 +139,14 @@ const linkProps = $derived(() => {
     color: var(--smrt-color-on-primary);
   }
 
+  /* M3 hover state layer: 8% of the on-color blended over the base, so the
+     button visibly darkens on hover instead of repeating its base color. */
   .primary:hover:not(:disabled):not(.disabled) {
-    background: var(--smrt-color-primary);
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-on-primary) 8%,
+      var(--smrt-color-primary)
+    );
   }
 
   .secondary {
@@ -168,7 +174,11 @@ const linkProps = $derived(() => {
   }
 
   .danger:hover:not(:disabled):not(.disabled) {
-    background: var(--smrt-color-error);
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-on-error) 8%,
+      var(--smrt-color-error)
+    );
   }
 
   /* Full width */

package/dist/components/ui/Pagination.svelte

@@ -136,7 +136,9 @@ const isLastPage = $derived(currentPage === totalPages);
     {/if}
 
     <ul class="page-numbers">
-      {#each pageNumbers as page}
+      <!-- Key by index: getPageNumbers can emit two 'ellipsis' sentinels, whose
+           value-identity would collide under a value-based key (#1586). -->
+      {#each pageNumbers as page, i (i)}
         {#if page === 'ellipsis'}
           <li class="page-numbers__item">
             <span class="ellipsis" aria-hidden="true">&hellip;</span>

package/dist/components/ui/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Pagination.svelte.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAuKD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Pagination.svelte.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAwKD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/__tests__/Pagination.test.js

@@ -84,6 +84,20 @@ describe('Pagination', () => {
         const page2 = screen.getByRole('link', { name: 'Go to page 2' });
         expect(page2).toHaveAttribute('href', '/articles/page/2');
     });
+    it('renders both ellipses on a deep middle page without key collision (#1586)', async () => {
+        // currentPage in the middle of many pages emits two 'ellipsis' sentinels.
+        // Keying the {#each} by value would collide; keying by index keeps both.
+        const onPageChange = vi.fn();
+        const { container, rerender } = render(Pagination, {
+            props: { currentPage: 10, totalPages: 20, onPageChange },
+        });
+        expect(container.querySelectorAll('.ellipsis')).toHaveLength(2);
+        // Re-render to an adjacent deep page: still two ellipses, still one current.
+        await rerender({ currentPage: 11, totalPages: 20, onPageChange });
+        expect(container.querySelectorAll('.ellipsis')).toHaveLength(2);
+        expect(container.querySelectorAll('[aria-current="page"]')).toHaveLength(1);
+        expect(screen.getByText('11')).toHaveAttribute('aria-current', 'page');
+    });
     it('is axe-clean in callback mode on a middle page', async () => {
         const { container } = render(Pagination, {
             props: { currentPage: 3, totalPages: 10, onPageChange: vi.fn() },