@sentropic/design-system-svelte 0.16.0 → 0.18.0

package/dist/Rating.svelte

@@ -49,8 +49,21 @@
   const stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
 
   // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+  // En mode allowHalf, la valeur peut être un demi-entier : on focus l'étoile plafond.
   const focusedStar = $derived(value > 0 ? Math.ceil(value) : 1);
 
+  // Refs des boutons radio pour déplacer le focus programmatiquement.
+  let radioRefs = $state<Record<number, HTMLElement | null>>({});
+
+  // Texte accessible décrivant la valeur courante (utilisé pour aria-valuetext et aria-label readonly).
+  const valueText = $derived(
+    value === 0
+      ? `0 / ${max}`
+      : allowHalf && value % 1 !== 0
+        ? `${value} / ${max}`
+        : `${value} / ${max}`
+  );
+
   function fill(star: number): "full" | "half" | "empty" {
     if (value >= star) return "full";
     if (allowHalf && value >= star - 0.5) return "half";
@@ -85,64 +98,140 @@
     if (readonly) return;
     const step = allowHalf ? 0.5 : 1;
     let handled = true;
+    let next: number | null = null;
     switch (event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        commit(Math.min(max, value + step));
+        next = Math.min(max, value + step);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        commit(Math.max(0, value - step));
+        // En mode entier, ne pas descendre sous 1 (pas de radio "0").
+        next = allowHalf ? Math.max(0, value - step) : Math.max(1, value - step);
         break;
       case "Home":
-        commit(0);
+        // Home → première étoile (1), pas 0 (aucun radio "0" n'existe).
+        next = allowHalf ? 0 : 1;
         break;
       case "End":
-        commit(max);
+        next = max;
         break;
       default:
         handled = false;
     }
-    if (handled) event.preventDefault();
+    if (handled) {
+      event.preventDefault();
+      if (next !== null) {
+        commit(next);
+        // En mode entier, déplacer le focus DOM vers le radio cible.
+        if (!allowHalf) {
+          const targetStar = next > 0 ? Math.ceil(next) : 1;
+          const targetEl = radioRefs[targetStar];
+          if (targetEl) targetEl.focus();
+        }
+      }
+    }
   }
+
+  // En mode allowHalf, on expose un slider ARIA (valeurs fractionnaires non représentables
+  // fidèlement par un radiogroup). En mode entier, on garde radiogroup/radio.
+  // Readonly : rendu non interactif avec span + aria-label global pour éviter les boutons disabled
+  // qui disparaissent de l'arbre d'accessibilité interactif.
 </script>
 
-<div
-  {...rest}
-  class={classes}
-  role="radiogroup"
-  aria-label={label}
-  aria-readonly={readonly ? "true" : undefined}
->
-  {#each stars as star (star)}
-    {@const state = fill(star)}
-    <button
-      type="button"
-      class="st-rating__star"
-      class:st-rating__star--full={state === "full"}
-      class:st-rating__star--half={state === "half"}
-      role="radio"
-      name={name}
-      aria-checked={Math.ceil(value) === star ? "true" : "false"}
-      aria-label={`${star} / ${max}`}
-      tabindex={!readonly && star === focusedStar ? 0 : -1}
-      disabled={readonly}
-      onclick={(event) => onStarClick(event, star)}
-      onkeydown={onKeyDown}
-    >
-      {#if state === "half"}
-        <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
-      {:else}
+{#if readonly}
+  <!-- Readonly : pas d'éléments interactifs disabled — on expose la note via aria-label sur le groupe. -->
+  <div
+    {...rest}
+    class={classes}
+    role="img"
+    aria-label={label ? `${label} : ${valueText}` : valueText}
+  >
+    {#each stars as star (star)}
+      {@const state = fill(star)}
+      <span class="st-rating__star" class:st-rating__star--full={state === "full"} class:st-rating__star--half={state === "half"} aria-hidden="true">
+        {#if state === "half"}
+          <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+        {:else}
+          <Star
+            size={iconSize}
+            strokeWidth={1.75}
+            fill={state === "full" ? "currentColor" : "none"}
+            aria-hidden="true"
+          />
+        {/if}
+      </span>
+    {/each}
+  </div>
+{:else if allowHalf}
+  <!-- allowHalf : slider ARIA — valeurs fractionnaires (0.5 step), plus fidèle que radiogroup. -->
+  <div
+    {...rest}
+    class={classes}
+    role="slider"
+    aria-label={label}
+    aria-valuemin={0}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    aria-valuetext={valueText}
+    tabindex={0}
+    onkeydown={onKeyDown}
+  >
+    {#each stars as star (star)}
+      {@const state = fill(star)}
+      <span
+        class="st-rating__star"
+        class:st-rating__star--full={state === "full"}
+        class:st-rating__star--half={state === "half"}
+        aria-hidden="true"
+        onclick={(event) => onStarClick(event, star)}
+      >
+        {#if state === "half"}
+          <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+        {:else}
+          <Star
+            size={iconSize}
+            strokeWidth={1.75}
+            fill={state === "full" ? "currentColor" : "none"}
+            aria-hidden="true"
+          />
+        {/if}
+      </span>
+    {/each}
+  </div>
+{:else}
+  <!-- Mode entier : radiogroup / radio. aria-checked=true uniquement sur l'étoile == value. -->
+  <div
+    {...rest}
+    class={classes}
+    role="radiogroup"
+    aria-label={label}
+  >
+    {#each stars as star (star)}
+      {@const state = fill(star)}
+      <button
+        type="button"
+        class="st-rating__star"
+        class:st-rating__star--full={state === "full"}
+        role="radio"
+        name={name}
+        aria-checked={value === star ? "true" : "false"}
+        aria-label={`${star} / ${max}`}
+        tabindex={star === focusedStar ? 0 : -1}
+        bind:this={radioRefs[star]}
+        onclick={(event) => onStarClick(event, star)}
+        onkeydown={onKeyDown}
+      >
         <Star
           size={iconSize}
           strokeWidth={1.75}
           fill={state === "full" ? "currentColor" : "none"}
           aria-hidden="true"
         />
-      {/if}
-    </button>
-  {/each}
-</div>
+      </button>
+    {/each}
+  </div>
+{/if}
 
 <style>
   .st-rating {
@@ -186,4 +275,10 @@
   .st-rating--readonly .st-rating__star {
     cursor: default;
   }
+
+  /* Mode allowHalf : le slider (conteneur) doit afficher un focus-visible. */
+  [role="slider"].st-rating:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
 </style>

package/dist/Rating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Rating.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2GJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Rating.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsKJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/SelectableList.svelte

@@ -60,7 +60,7 @@
 
   // --- Row registry: ordered by DOM position so arrow nav matches the visual
   //     order regardless of registration timing. -------------------------------
-  type Entry = { el: HTMLElement; value: string | undefined };
+  type Entry = { el: HTMLElement; value: string | undefined; disabled?: boolean };
   let entries = $state<Entry[]>([]);
 
   // The element that currently holds the roving tab stop (tabindex 0). Null until
@@ -79,9 +79,14 @@
   // register/unregister are called from each row's $effect. They read AND write
   // `entries`, so the read must be untracked — otherwise the calling effect would
   // subscribe to `entries`, and writing it would re-run the effect forever.
-  function register(el: HTMLElement, rowValue: string | undefined): () => void {
+  // Disabled rows are registered with disabled:true so navigate() can skip them
+  // explicitly, making the skip correct even when disabled state changes mid-session.
+  function register(el: HTMLElement, rowValue: string | undefined, rowDisabled = false): () => void {
     untrack(() => {
-      entries = sortByDom([...entries.filter((e) => e.el !== el), { el, value: rowValue }]);
+      entries = sortByDom([
+        ...entries.filter((e) => e.el !== el),
+        { el, value: rowValue, disabled: rowDisabled }
+      ]);
     });
     return () => {
       untrack(() => {
@@ -91,8 +96,30 @@
     };
   }
 
-  // Default roving stop = first registered (DOM-ordered) row when none focused.
-  const effectiveTabStop = $derived(tabStopEl ?? entries[0]?.el ?? null);
+  // Default roving stop = first non-disabled DOM-ordered row when none focused,
+  // or when the current tabStopEl has become disabled.
+  const effectiveTabStop = $derived.by((): HTMLElement | null => {
+    if (tabStopEl) {
+      const entry = entries.find((e) => e.el === tabStopEl);
+      if (entry && !entry.disabled) return tabStopEl;
+    }
+    return entries.find((e) => !e.disabled)?.el ?? null;
+  });
+
+  // Si la row qui détient le focus DOM devient disabled (in-place, sans unmount),
+  // transférer le focus vers la nouvelle cible de roving tabindex.
+  // Note : le cas du cycle unregister/register est géré dans SelectableRow via
+  // l'$effect sur `disabled` qui appelle navigate() AVANT le cleanup.
+  $effect(() => {
+    const newStop = effectiveTabStop;
+    if (!newStop) return;
+    if (tabStopEl !== null) {
+      const disabledEntry = entries.find((e) => e.el === tabStopEl && e.disabled);
+      if (disabledEntry && tabStopEl.contains(document.activeElement ?? null)) {
+        newStop.focus();
+      }
+    }
+  });
 
   function valueOf(el: HTMLElement): string | undefined {
     return entries.find((e) => e.el === el)?.value;
@@ -137,13 +164,34 @@
     if (entries.length === 0) return;
     const idx = entries.findIndex((e) => e.el === el);
     if (idx === -1) return;
-    let targetIdx = idx;
-    if (key === "ArrowDown" || key === "ArrowRight") targetIdx = idx + 1;
-    else if (key === "ArrowUp" || key === "ArrowLeft") targetIdx = idx - 1;
-    else if (key === "Home") targetIdx = 0;
-    else if (key === "End") targetIdx = entries.length - 1;
-    // Clamp (no wrap) so Home/End and arrows stay within bounds.
-    targetIdx = Math.max(0, Math.min(entries.length - 1, targetIdx));
+
+    let targetIdx: number | null = null;
+
+    if (key === "ArrowDown" || key === "ArrowRight") {
+      // Walk forward from current position, find the next non-disabled entry.
+      for (let i = idx + 1; i < entries.length; i++) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "ArrowUp" || key === "ArrowLeft") {
+      // Walk backward from current position, find the previous non-disabled entry.
+      for (let i = idx - 1; i >= 0; i--) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "Home") {
+      // First non-disabled entry.
+      for (let i = 0; i < entries.length; i++) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "End") {
+      // Last non-disabled entry.
+      for (let i = entries.length - 1; i >= 0; i--) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    }
+
+    // If no target found (all remaining are disabled, or already at boundary), stay put.
+    if (targetIdx === null) return;
+
     const target = entries[targetIdx]?.el;
     if (target) {
       tabStopEl = target;

package/dist/SelectableList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0JJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0MJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/SelectableRow.svelte

@@ -16,8 +16,8 @@
     readonly managed: true;
     /** listbox role for the wrapper → rows are "option". */
     readonly itemRole: "option";
-    /** Register a row element; returns an unregister callback. */
-    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
     /** Is the row with this element currently selected? */
     isSelected: (el: HTMLElement) => boolean;
     /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
@@ -44,8 +44,9 @@
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
     /**
-     * ARIA role for the standalone row. Defaults to "option" so a lone row still
-     * reads as a selectable item. Inside a list the role is forced to "option".
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox and would be invalid without one.
+     * Inside a SelectableList the role is always forced to "option".
      */
     role?: string;
     /**
@@ -71,7 +72,7 @@
     onselect,
     disabled = false,
     value,
-    role = "option",
+    role = "button",
     accentBar = false,
     leading,
     trailing,
@@ -86,10 +87,23 @@
   let el: HTMLElement | null = $state(null);
 
   // Register with the parent list (if any) so it can order rows for arrow nav
-  // and compute the roving tab stop. The effect re-registers if value changes.
+  // and compute the roving tab stop. Disabled rows are registered too so the
+  // list can skip them during navigation; the list owns the skip logic.
   $effect(() => {
-    if (!list || !el || disabled) return;
-    return list.register(el, value);
+    if (!list || !el) return;
+    return list.register(el, value, disabled);
+  });
+
+  // A11y edge-case : quand cette row passe à disabled=true ET qu'elle détient le
+  // focus DOM, transférer le focus vers la prochaine row enabled via navigate().
+  // On le fait ici (dans SelectableRow) pour avoir accès au focus DOM AVANT que
+  // le cycle unregister/register dans SelectableList ne perturbe l'état.
+  $effect(() => {
+    if (!disabled || !list || !el) return;
+    if (!el.contains(document.activeElement ?? null)) return;
+    // Déléguer via navigate ArrowDown (cherche prochaine row enabled vers l'avant,
+    // puis vers l'arrière si aucune). navigate appelle target.focus() directement.
+    list.navigate(el, "ArrowDown");
   });
 
   // Effective selected state: list-managed rows read the list; standalone rows
@@ -165,6 +179,7 @@
   class={classes}
   role={effectiveRole}
   aria-selected={effectiveRole === "option" ? isSelected : undefined}
+  aria-pressed={effectiveRole === "button" ? isSelected : undefined}
   aria-disabled={disabled ? "true" : undefined}
   data-value={value}
   {tabindex}

package/dist/SelectableRow.svelte.d.ts

@@ -13,8 +13,8 @@ export type SelectableListContext = {
     readonly managed: true;
     /** listbox role for the wrapper → rows are "option". */
     readonly itemRole: "option";
-    /** Register a row element; returns an unregister callback. */
-    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
     /** Is the row with this element currently selected? */
     isSelected: (el: HTMLElement) => boolean;
     /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
@@ -40,8 +40,9 @@ export type SelectableRowProps = {
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
     /**
-     * ARIA role for the standalone row. Defaults to "option" so a lone row still
-     * reads as a selectable item. Inside a list the role is forced to "option".
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox and would be invalid without one.
+     * Inside a SelectableList the role is always forced to "option".
      */
     role?: string;
     /**

package/dist/SelectableRow.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,CAAC;IACrE,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoHJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,wIAAwI;IACxI,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzF,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiIJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/SlideIndicator.svelte

@@ -43,6 +43,9 @@
 
   const items = $derived(Array.from({ length: Math.max(0, count) }, (_, i) => i));
 
+  // Refs des boutons pour déplacer le focus programmatiquement lors de la navigation clavier.
+  let buttonRefs = $state<Record<number, HTMLElement | null>>({});
+
   function select(index: number) {
     if (index < 0 || index >= count || index === current) return;
     onChange?.(index);
@@ -69,21 +72,32 @@
         return;
     }
     event.preventDefault();
+    // Déplacer le focus DOM vers le bouton cible (roving tabindex correct).
+    const targetEl = buttonRefs[target];
+    if (targetEl) targetEl.focus();
     select(target);
   }
 </script>
 
-<div {...rest} class={classes} role="tablist" aria-label={label}>
+<!--
+  Choix de pattern : role="group" + boutons avec aria-current.
+  Justification : un indicateur de carrousel/pagination n'est PAS un tablist — il n'y a pas de
+  tabpanel associé. Utiliser role="tab" sans aria-controls/tabpanel trompe les lecteurs d'écran
+  qui annoncent « onglet X sur N » sans panneau contrôlé.
+  Pattern retenu (ARIA Authoring Practices Guide — Carousel) : role="group" nommé + boutons natifs
+  avec aria-current="true" sur le point courant + roving tabindex.
+  Le SR annonce « Groupe [label] — [label] 1, bouton ; [label] 2, courant, bouton ; … »
+-->
+<div {...rest} class={classes} role="group" aria-label={label}>
   {#each items as index (index)}
     <button
       type="button"
       class="st-slideIndicator__dot"
       class:st-slideIndicator__dot--current={index === current}
-      role="tab"
-      aria-selected={index === current ? "true" : "false"}
       aria-current={index === current ? "true" : undefined}
       aria-label={`${label} ${index + 1}`}
       tabindex={index === current ? 0 : -1}
+      bind:this={buttonRefs[index]}
       onclick={() => select(index)}
       onkeydown={(event) => onKeyDown(event, index)}
     ></button>

package/dist/SlideIndicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuEJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8EJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}