@sveltia/ui 0.72.1 → 0.73.0

package/dist/components/grid/grid-foot.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -31,7 +33,7 @@
   {...restProps}
   role="rowgroup"
   class="sui grid-foot {className}"
-  aria-roledescription="grid foot"
+  aria-roledescription={_('_sui.role_descriptions.grid_foot')}
 >
   {@render children?.()}
 </div>

package/dist/components/grid/grid-head.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -31,7 +33,7 @@
   {...restProps}
   role="rowgroup"
   class="sui grid-head {className}"
-  aria-roledescription="grid head"
+  aria-roledescription={_('_sui.role_descriptions.grid_head')}
 >
   {@render children?.()}
 </div>

package/dist/components/listbox/option-group.svelte

@@ -7,6 +7,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import TruncatedText from '../typography/truncated-text.svelte';
 
   /**
@@ -50,7 +51,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-label"
-  aria-roledescription="option group"
+  aria-roledescription={_('_sui.role_descriptions.option_group')}
 >
   <div role="none" id="{id}-label" class="label">
     <TruncatedText>

package/dist/components/listbox/option.svelte

@@ -202,6 +202,10 @@
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-hover-background-color);
 }
+.option :global(.focused) {
+  outline-color: var(--sui-focus-ring-color);
+  outline-offset: calc(var(--sui-focus-ring-width) * -1);
+}
 .option :global(.icon.check) {
   margin: -2px;
 }</style>

package/dist/components/menu/menu-item-group.svelte

@@ -3,6 +3,8 @@
   A menu item group.
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { CommonEventHandlers } from '../../typedefs';
    */
@@ -43,7 +45,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby={title ? `${id}-title` : undefined}
-  aria-roledescription="menu item group"
+  aria-roledescription={_('_sui.role_descriptions.menu_item_group')}
 >
   {#if title}
     <div role="none" class="title" id="{id}-title">{title}</div>

package/dist/components/radio/radio.svelte

@@ -24,7 +24,9 @@
    * @property {any} [value] The `data-value` attribute on the `<button>` element.
    * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
    * `boolean`. Default: auto detect.
-   * @property {string} [label] Text label displayed next to the checkbox.
+   * @property {string} [label] Text label displayed next to the radio button.
+   * @property {string} [ariaLabel] `aria-label` attribute on the `<button>` element, for a radio
+   * button without a visible label.
    * @property {string} [group] The two-way bound variable to manage the state of a group of radio
    * buttons. It works in the same way as the [`<input
    * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
@@ -47,6 +49,7 @@
     value = undefined,
     valueType = undefined,
     label = undefined,
+    ariaLabel = undefined,
     group = $bindable(),
     children,
     onChange,
@@ -63,6 +66,14 @@
    */
   let buttonElement = $state();
 
+  /**
+   * Accessible name given as a prop or as a plain `aria-label` attribute. It takes the place of the
+   * visible label, which the button otherwise points at — but only when there is one to point at.
+   * @type {string | undefined}
+   */
+  const accessibleLabel = $derived(ariaLabel ?? restProps['aria-label']);
+  const hasVisibleLabel = $derived(!!(children || label));
+
   // Sync `checked` with `group` and `value`
   $effect(() => {
     if (typeof group === 'string') {
@@ -77,8 +88,11 @@
   });
 </script>
 
+<!--
+  `restProps`, including any `aria-*` attribute, go on the `<button>`: ARIA ignores them on the
+  presentational wrapper.
+-->
 <span
-  {...restProps}
   role="none"
   class="sui radio {className}"
   class:disabled
@@ -90,6 +104,7 @@
   }}
 >
   <Button
+    {...restProps}
     bind:element={buttonElement}
     role="radio"
     {id}
@@ -99,7 +114,8 @@
     {value}
     {valueType}
     aria-checked={checked}
-    aria-labelledby="{id}-label"
+    aria-label={accessibleLabel || undefined}
+    aria-labelledby={!accessibleLabel && hasVisibleLabel ? `${id}-label` : undefined}
     onclick={(event) => {
       event.preventDefault();
 
@@ -132,6 +148,8 @@
   align-items: center;
   gap: 8px;
   margin: var(--sui-focus-ring-width);
+  min-width: 24px;
+  min-height: 24px;
   color: var(--sui-control-foreground-color);
   font-family: var(--sui-control-font-family);
   font-size: var(--sui-control-font-size);

package/dist/components/radio/radio.svelte.d.ts

@@ -42,9 +42,14 @@ declare const Radio: import("svelte").Component<{
      */
     valueType?: string | undefined;
     /**
-     * Text label displayed next to the checkbox.
+     * Text label displayed next to the radio button.
      */
     label?: string | undefined;
+    /**
+     * `aria-label` attribute on the `<button>` element, for a radio
+     * button without a visible label.
+     */
+    ariaLabel?: string | undefined;
     /**
      * The two-way bound variable to manage the state of a group of radio
      * buttons. It works in the same way as the [`<input
@@ -101,9 +106,14 @@ type Props = {
      */
     valueType?: string | undefined;
     /**
-     * Text label displayed next to the checkbox.
+     * Text label displayed next to the radio button.
      */
     label?: string | undefined;
+    /**
+     * `aria-label` attribute on the `<button>` element, for a radio
+     * button without a visible label.
+     */
+    ariaLabel?: string | undefined;
     /**
      * The two-way bound variable to manage the state of a group of radio
      * buttons. It works in the same way as the [`<input

package/dist/components/resizable-pane/resizable-handle.svelte

@@ -284,11 +284,20 @@
   pointer-events: none;
   opacity: 0.4;
 }
+.resizable-handle::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
 .resizable-handle.horizontal {
   width: var(--sui-resizable-handle-size, 4px);
   height: 100%;
   cursor: col-resize;
 }
+.resizable-handle.horizontal::before {
+  inset-inline: calc((var(--sui-resizable-handle-size, 4px) - 24px) / 2);
+}
 .resizable-handle.horizontal .handle-bar {
   width: 2px;
   height: 40%;
@@ -299,6 +308,9 @@
   height: var(--sui-resizable-handle-size, 4px);
   cursor: row-resize;
 }
+.resizable-handle.vertical::before {
+  inset-block: calc((var(--sui-resizable-handle-size, 4px) - 24px) / 2);
+}
 .resizable-handle.vertical .handle-bar {
   height: 2px;
   width: 40%;

package/dist/components/select/combobox.svelte

@@ -8,7 +8,9 @@
 <script>
   import { _ } from '@sveltia/i18n';
   import { onMount } from 'svelte';
+  import { normalize } from '../../services/group.svelte.js';
   import { createOptionRegistry, getSelectedItemDetail } from '../../services/select.svelte.js';
+  import { findTypeAheadMatch, TypeAhead } from '../../services/type-ahead.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Listbox from '../listbox/listbox.svelte';
@@ -124,6 +126,71 @@
     onChange?.(new CustomEvent('Change', { detail }));
   };
 
+  /**
+   * Keystroke buffer for type-ahead on the collapsed select.
+   */
+  const typeAhead = new TypeAhead();
+
+  /**
+   * Type-ahead on the collapsed, select-only combobox: a printable character picks the next option
+   * whose label starts with what has been typed, without expanding the dropdown — the way a native
+   * `<select>` behaves and the Select-Only Combobox pattern expects. There is no option element to
+   * report while the dropdown is collapsed, so the `Change` event carries the registry entry.
+   * @param {KeyboardEvent} event The `keydown` event.
+   */
+  const onComboboxKeyDown = (event) => {
+    const { key, ctrlKey, metaKey, altKey } = event;
+
+    if (
+      disabled ||
+      readonly ||
+      isPopupOpen ||
+      key.length !== 1 ||
+      key === ' ' ||
+      ctrlKey ||
+      metaKey ||
+      altKey
+    ) {
+      return;
+    }
+
+    // Swallow the key whether or not it matches, as a native `<select>` does. Left to the browser,
+    // a printable key on a non-editable element starts Firefox’s find-as-you-type.
+    event.preventDefault();
+
+    const entries = registry.entries.filter((entry) => !entry.disabled);
+
+    const index = findTypeAheadMatch(
+      entries.map((entry) => normalize(entry.label ?? '')),
+      typeAhead.push(key),
+      entries.findIndex((entry) => entry.value === value),
+    );
+
+    if (index === -1) {
+      return;
+    }
+
+    const entry = entries[index];
+
+    if (entry.value === value) {
+      return;
+    }
+
+    value = entry.value;
+    _onChange();
+    onChange?.(
+      new CustomEvent('Change', {
+        detail: {
+          target: undefined,
+          type: entry.type,
+          name: entry.name,
+          label: entry.label,
+          value: entry.value,
+        },
+      }),
+    );
+  };
+
   /**
    * The `<Listbox>` rendered for this combobox. It’s reached through {@link optionHost}, which owns
    * it wherever the options currently live, rather than through the popup, which only holds it
@@ -254,6 +321,7 @@
       aria-invalid={invalid}
       aria-haspopup="listbox"
       aria-label={ariaLabel}
+      onkeydown={onComboboxKeyDown}
     >
       <div role="none" class="label">
         <TruncatedText>
@@ -364,7 +432,7 @@
     {/if}
     <div bind:this={listboxSlot} role="none" class="listbox-slot"></div>
     {#if !hasMatchingOptions}
-      <div role="alert" class="no-options" aria-live="assertive">
+      <div role="status" class="no-options">
         {_('_sui.combobox.no_matching_options')}
       </div>
     {/if}

package/dist/components/select/select-tags.svelte

@@ -130,16 +130,23 @@
   {hidden}
   bind:this={wrapperElement}
 >
-  <span
-    role="listbox"
-    aria-multiselectable="true"
-    aria-label={_('_sui.select_tags.selected_options')}
-  >
+  <!--
+    The tags follow the APG layout grid pattern rather than a listbox: a listbox may only hold
+    options, and each tag also carries its Remove button. Each tag is a row whose first cell, the
+    label, is the focusable part that the arrow keys reorder.
+    @see https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/
+  -->
+  <span role="grid" aria-label={_('_sui.select_tags.selected_options')}>
     {#each values as value, index (value)}
       {@const option = optionMap.get(value)}
       {@const label = option?.label || option?.value || value}
+      <!--
+        The drag handlers are the pointer path only; the keyboard path is the focusable label cell
+        below, so the row itself stays out of the tab order
+      -->
+      <!-- svelte-ignore a11y_interactive_supports_focus -->
       <span
-        role="none"
+        role="row"
         draggable={!disabled && !readonly}
         class:drag-source={dragIndex === index}
         class:drop-before={dropIndex === index && dragIndex !== index && dragIndex !== index - 1}
@@ -195,8 +202,7 @@
       >
         <span
           class="label"
-          role="option"
-          aria-selected="true"
+          role="gridcell"
           tabindex={disabled || readonly ? undefined : 0}
           onkeydown={async (event) => {
             const targetIndex = getKeyboardMoveTarget({
@@ -215,20 +221,22 @@
           {label}
         </span>
         {#if option}
-          <Button
-            iconic
-            size="small"
-            disabled={disabled || readonly}
-            aria-label={_('_sui.select_tags.remove_x', { values: { name: label } })}
-            onclick={() => {
-              values = values.filter((v) => v !== value);
-              onRemoveValue?.(new CustomEvent('RemoveValue', { detail: { value } }));
-            }}
-          >
-            {#snippet startIcon()}
-              <Icon name="close" />
-            {/snippet}
-          </Button>
+          <span role="gridcell">
+            <Button
+              iconic
+              size="small"
+              disabled={disabled || readonly}
+              aria-label={_('_sui.select_tags.remove_x', { values: { name: label } })}
+              onclick={() => {
+                values = values.filter((v) => v !== value);
+                onRemoveValue?.(new CustomEvent('RemoveValue', { detail: { value } }));
+              }}
+            >
+              {#snippet startIcon()}
+                <Icon name="close" />
+              {/snippet}
+            </Button>
+          </span>
         {/if}
       </span>
     {/each}
@@ -272,7 +280,7 @@
 .select-tags.disabled > * {
   opacity: 0.5;
 }
-.select-tags span[role=listbox] {
+.select-tags span[role=grid] {
   display: contents;
 }
 .select-tags span[draggable] {
@@ -314,6 +322,9 @@
 .select-tags span[draggable] .label {
   outline: none;
 }
+.select-tags span[draggable] span[role=gridcell]:not(.label) {
+  display: contents;
+}
 .select-tags span[draggable] :global(button) {
   outline-offset: -2px;
 }

package/dist/components/slider/slider.d.ts

@@ -10,6 +10,12 @@ export function getSliderSteps({ min, max, step, barWidth }: {
 export function toLogicalX(physicalX: number, barWidth: number, rtl: boolean): number;
 export function findNearestStepIndex(positionList: number[], logicalX: number): number;
 export function getSliderKeyDirection(key: string, rtl: boolean): 1 | -1 | 0;
+export function getSliderKeyTargetIndex({ key, rtl, currentIndex, length }: {
+    key: string;
+    rtl: boolean;
+    currentIndex: number;
+    length: number;
+}): number;
 export function wouldCrossThumbs({ valueIndex, targetPosition, sliderPositions }: {
     valueIndex: number;
     targetPosition: number;

package/dist/components/slider/slider.js

@@ -82,6 +82,46 @@ export const getSliderKeyDirection = (key, rtl) => {
   return 0;
 };
 
+/**
+ * Get the step index a key moves the thumb to, per the APG Slider pattern: the arrow keys move by
+ * one step, Page Up/Down by a tenth of the range, and Home/End jump to either end.
+ * @param {object} options Options.
+ * @param {string} options.key The key pressed.
+ * @param {boolean} options.rtl Whether the layout is right-to-left.
+ * @param {number} options.currentIndex Index of the current step.
+ * @param {number} options.length Number of steps.
+ * @returns {number} Target index, clamped to the range, or `-1` if the key doesn’t move the thumb
+ * or the thumb is already where the key would take it.
+ */
+export const getSliderKeyTargetIndex = ({ key, rtl, currentIndex, length }) => {
+  const lastIndex = length - 1;
+  const page = Math.max(1, Math.round(length / 10));
+  /** @type {number} */
+  let index;
+
+  if (key === 'Home') {
+    index = 0;
+  } else if (key === 'End') {
+    index = lastIndex;
+  } else if (key === 'PageUp') {
+    index = currentIndex + page;
+  } else if (key === 'PageDown') {
+    index = currentIndex - page;
+  } else {
+    const direction = getSliderKeyDirection(key, rtl);
+
+    if (!direction) {
+      return -1;
+    }
+
+    index = currentIndex + direction;
+  }
+
+  index = Math.min(lastIndex, Math.max(0, index));
+
+  return index === currentIndex ? -1 : index;
+};
+
 /**
  * Whether moving one thumb of a multi-thumb slider to the given position would make it cross, or
  * land on, the other thumb.

package/dist/components/slider/slider.svelte

@@ -12,7 +12,7 @@
   import { onMount } from 'svelte';
   import {
     findNearestStepIndex,
-    getSliderKeyDirection,
+    getSliderKeyTargetIndex,
     getSliderSteps,
     toLogicalX,
     wouldCrossThumbs,
@@ -28,10 +28,13 @@
    * @property {number} [min] Minimum allowed value. An alias of the `aria-valuemin` attribute.
    * @property {number} [max] Maximum allowed value. An alias of the `aria-valuemax` attribute.
    * @property {string} [sliderLabel] `aria-label` on the slider.
+   * @property {string} [ariaLabelledby] `aria-labelledby` on a single-thumb slider, for a visible
+   * label elsewhere on the page.
    * @property {[number, number]} [values] Value list for a multi-thumb slider.
    * @property {[string, string]} [sliderLabels] `aria-label` on a multi-thumb slider.
    * @property {number} [step] Step option like `<input type="range">`.
-   * @property {(string[] | number[])} [optionLabels] Visible labels on the slider.
+   * @property {(string[] | number[])} [optionLabels] Visible labels on the slider. When there is
+   * one per step, the current one is also read out as the value (`aria-valuetext`).
    * @property {boolean} [flex] Make the text input container flexible.
    * @property {string} [class] The `class` attribute on the wrapper element.
    * @property {boolean} [hidden] Whether to hide the widget.
@@ -55,6 +58,7 @@
     min = 0,
     max = 100,
     sliderLabel = '',
+    ariaLabelledby = undefined,
     values = $bindable(undefined),
     sliderLabels = undefined,
     step = 1,
@@ -79,6 +83,21 @@
   let positionList = $state([]);
   /** @type {number[]} */
   let valueList = $state([]);
+
+  /**
+   * Get the text read out for a value, when the visible option labels line up with the steps.
+   * @param {number | undefined} _value Value.
+   * @returns {string | undefined} Matching label, if any.
+   */
+  const getValueText = (_value) => {
+    if (optionLabels.length !== valueList.length || _value === undefined) {
+      return undefined;
+    }
+
+    const index = valueList.indexOf(_value);
+
+    return index === -1 ? undefined : String(optionLabels[index]);
+  };
   let startX = $state(0);
   let startScreenX = $state(0);
   // eslint-disable-next-line prefer-const
@@ -128,20 +147,26 @@
     }
 
     const _value = multiThumb ? /** @type {[number, number]} */ (values)[valueIndex] : value;
-    const direction = getSliderKeyDirection(key, isRTL());
 
-    if (!direction) {
+    const index = getSliderKeyTargetIndex({
+      key,
+      rtl: isRTL(),
+      currentIndex: valueList.indexOf(_value),
+      length: valueList.length,
+    });
+
+    if (index === -1) {
+      // Still swallow the key if it’s one of the slider’s, so Home/End don’t scroll the page
+      if (['Home', 'End', 'PageUp', 'PageDown'].includes(key)) {
+        event.preventDefault();
+      }
+
       return;
     }
 
     event.preventDefault();
     event.stopPropagation();
 
-    const index =
-      (direction < 0 && _value > min) || (direction > 0 && _value < max)
-        ? valueList.indexOf(_value) + direction
-        : -1;
-
     if (index > -1) {
       if (
         multiThumb &&
@@ -325,7 +350,8 @@
     <div
       role="slider"
       tabindex={disabled ? -1 : 0}
-      aria-label={multiThumb ? sliderLabels?.[0] : sliderLabel}
+      aria-label={(multiThumb ? sliderLabels?.[0] : sliderLabel) || undefined}
+      aria-labelledby={multiThumb ? undefined : ariaLabelledby}
       aria-hidden={hidden}
       aria-disabled={disabled}
       aria-readonly={readonly}
@@ -333,6 +359,7 @@
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={multiThumb ? values?.[0] : value}
+      aria-valuetext={getValueText(multiThumb ? values?.[0] : value)}
       style:inset-inline-start={`${sliderPositions[0]}px`}
       onpointerdown={(event) => onPointerDown(event, 0)}
       onkeydown={(event) => onKeyDown(event, 0)}
@@ -341,7 +368,7 @@
       <div
         role="slider"
         tabindex={disabled ? -1 : 0}
-        aria-label={sliderLabels?.[1]}
+        aria-label={sliderLabels?.[1] || undefined}
         aria-hidden={hidden}
         aria-disabled={disabled}
         aria-readonly={readonly}
@@ -349,6 +376,7 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={values?.[1]}
+        aria-valuetext={getValueText(values?.[1])}
         style:inset-inline-start={`${sliderPositions[1]}px`}
         onpointerdown={(event) => onPointerDown(event, 1)}
         onkeydown={(event) => onKeyDown(event, 1)}
@@ -421,6 +449,12 @@
   background-color: var(--sui-primary-accent-color-inverted);
   cursor: pointer;
 }
+[role=slider]::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+}
 [role=slider]:dir(ltr) {
   transform: translate(calc((var(--sui-checkbox-height) / 2 - 1px) * -1), calc((var(--sui-checkbox-height) / 4 - 1px) * -1));
 }

package/dist/components/slider/slider.svelte.d.ts

@@ -28,6 +28,11 @@ declare const Slider: import("svelte").Component<{
      * `aria-label` on the slider.
      */
     sliderLabel?: string | undefined;
+    /**
+     * `aria-labelledby` on a single-thumb slider, for a visible
+     * label elsewhere on the page.
+     */
+    ariaLabelledby?: string | undefined;
     /**
      * Value list for a multi-thumb slider.
      */
@@ -41,7 +46,8 @@ declare const Slider: import("svelte").Component<{
      */
     step?: number | undefined;
     /**
-     * Visible labels on the slider.
+     * Visible labels on the slider. When there is
+     * one per step, the current one is also read out as the value (`aria-valuetext`).
      */
     optionLabels?: string[] | number[] | undefined;
     /**
@@ -101,6 +107,11 @@ type Props = {
      * `aria-label` on the slider.
      */
     sliderLabel?: string | undefined;
+    /**
+     * `aria-labelledby` on a single-thumb slider, for a visible
+     * label elsewhere on the page.
+     */
+    ariaLabelledby?: string | undefined;
     /**
      * Value list for a multi-thumb slider.
      */
@@ -114,7 +125,8 @@ type Props = {
      */
     step?: number | undefined;
     /**
-     * Visible labels on the slider.
+     * Visible labels on the slider. When there is
+     * one per step, the current one is also read out as the value (`aria-valuetext`).
      */
     optionLabels?: string[] | number[] | undefined;
     /**

package/dist/components/switch/switch.svelte

@@ -32,7 +32,7 @@
    */
   let {
     /* eslint-disable prefer-const */
-    checked = $bindable(),
+    checked = $bindable(false),
     label = undefined,
     class: className,
     hidden = false,

package/dist/components/table/table-body.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -36,7 +38,7 @@
   role="rowgroup"
   class="sui table-body row-group {className}"
   aria-labelledby={label ? `${id}-label` : undefined}
-  aria-roledescription="table body"
+  aria-roledescription={_('_sui.role_descriptions.table_body')}
 >
   {#if label}
     <div role="row" class="row-group-caption">