@zylem/ui 0.8.13 → 0.9.0

package/src/components/TimelineLanes/TimelineLanes.css.ts

@@ -66,6 +66,12 @@ globalStyle('.zylem-lanes-ruler', {
   cursor: 'pointer',
 });
 
+// Inset: the scrolling lanes would clip a ring drawn outside the sticky ruler.
+globalStyle('.zylem-lanes-ruler:focus-visible', {
+  outline: 'none',
+  boxShadow: 'inset 0 0 0 2px rgba(97, 166, 232, 0.6)',
+});
+
 globalStyle('.zylem-lanes-range', {
   position: 'absolute',
   top: 0,

package/src/components/TimelineLanes/TimelineLanes.tsx

@@ -12,8 +12,10 @@ import {
 import {
   type ClipBounds,
   clamp,
+  describeTime,
   resolveClipDrag,
   rulerTicks,
+  sliderKeyValue,
   snapTime,
   type TimeScale,
 } from './lanes-math';
@@ -59,7 +61,11 @@ export interface TimelineLanesProps {
   /** Timeline length in units. */
   length: number;
   playhead?: number;
-  /** Fires while the ruler is clicked or dragged. */
+  /**
+   * Fires while the ruler is clicked or dragged, and for its keys once it has
+   * focus: the arrows step by the ruler's ticks (by its labelled ticks with
+   * Shift), Home and End jump to the ends.
+   */
   onSeek?: (time: number) => void;
   /** Drag snap in units, applied to clips and markers (not to seeking). */
   snap?: number;
@@ -134,6 +140,24 @@ export function TimelineLanes(props: TimelineLanesProps) {
     window.addEventListener('pointercancel', stop);
   };
 
+  const seekFromKey = (event: KeyboardEvent) => {
+    if (props.disabled || !props.onSeek) return;
+    const step = minorStep() > 0 ? minorStep() / ppu() : 1;
+    const major = majorStep() / ppu();
+    const next = sliderKeyValue(event, {
+      value: props.playhead ?? 0,
+      min: 0,
+      max: props.length,
+      step,
+      bigStep: major > step ? major : step * 10,
+    });
+    if (next === null) return;
+    event.preventDefault();
+    // Page-level transport shortcuts (Home, arrows) must not seek a second time.
+    event.stopPropagation();
+    props.onSeek(next);
+  };
+
   const handleWheel = (event: WheelEvent) => {
     if (!props.onZoom || !(event.ctrlKey || event.metaKey)) return;
     event.preventDefault();
@@ -171,11 +195,17 @@ export function TimelineLanes(props: TimelineLanesProps) {
               class="zylem-lanes-ruler"
               style={{ width: `${bodyWidth()}px` }}
               onPointerDown={startSeek}
+              onKeyDown={seekFromKey}
               role={props.onSeek ? 'slider' : undefined}
+              tabIndex={props.onSeek && !props.disabled ? 0 : undefined}
               aria-label={props.onSeek ? 'Playhead' : undefined}
               aria-valuemin={props.onSeek ? 0 : undefined}
               aria-valuemax={props.onSeek ? props.length : undefined}
-              aria-valuenow={props.onSeek ? props.playhead : undefined}
+              aria-valuenow={props.onSeek ? (props.playhead ?? 0) : undefined}
+              aria-valuetext={
+                props.onSeek ? describeTime(props.playhead ?? 0, props.scale) : undefined
+              }
+              aria-disabled={props.onSeek && props.disabled ? 'true' : undefined}
             >
               <Show when={props.range}>
                 {(range) => (
@@ -298,7 +328,8 @@ export interface TimelineClipProps {
   movable?: boolean;
   resizable?: boolean;
   disabled?: boolean;
-  onSelect?: (event: PointerEvent) => void;
+  /** Pointer down, or Enter / Space while focused. */
+  onSelect?: (event: MouseEvent | KeyboardEvent) => void;
   /** Fires continuously while dragging. */
   onChange?: (change: TimelineClipChange) => void;
   /** Fires once when a drag ends, with the final bounds. */
@@ -378,6 +409,17 @@ export function TimelineClip(props: TimelineClipProps) {
       aria-label={props.label}
       aria-pressed={props.selected ? 'true' : 'false'}
       onPointerDown={beginDrag('move')}
+      onKeyDown={(event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        // Space is also a page-level play shortcut; on a focused clip it selects.
+        event.stopPropagation();
+        props.onSelect?.(event);
+      }}
+      onClick={(event) => {
+        // Assistive tech activates with a click and no pointer down before it.
+        if (event.detail === 0) props.onSelect?.(event);
+      }}
       onDblClick={(event) => {
         event.stopPropagation();
         props.onDoubleClick?.();
@@ -412,7 +454,8 @@ export interface KeyframeMarkerProps {
   color?: string;
   selected?: boolean;
   disabled?: boolean;
-  onSelect?: (event: PointerEvent) => void;
+  /** Pointer down, or a click from the keyboard or assistive tech. */
+  onSelect?: (event: MouseEvent | KeyboardEvent) => void;
   /** Fires continuously while dragging. */
   onChange?: (time: number) => void;
   /** Fires once when a drag ends. */
@@ -476,6 +519,11 @@ export function KeyframeMarker(props: KeyframeMarkerProps) {
       aria-pressed={props.selected ? 'true' : 'false'}
       title={props.label}
       onPointerDown={beginDrag}
+      onClick={(event) => {
+        // The pointer already selected on pointer down; keys and assistive tech
+        // click without one.
+        if (event.detail === 0) props.onSelect?.(event);
+      }}
       onDblClick={(event) => {
         event.stopPropagation();
         props.onDoubleClick?.();

package/src/components/TimelineLanes/lanes-math.ts

@@ -30,6 +30,57 @@ export function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
 
+export interface SliderKeyOptions {
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  /** Shift + arrow; defaults to ten steps. */
+  bigStep?: number;
+}
+
+/**
+ * Where a slider key moves `value`: arrows step (Shift for a big step), Home
+ * and End jump to the ends. Null for any other key, which the slider should
+ * let through.
+ */
+export function sliderKeyValue(
+  event: Pick<KeyboardEvent, 'key' | 'shiftKey'>,
+  options: SliderKeyOptions,
+): number | null {
+  const step = event.shiftKey ? (options.bigStep ?? options.step * 10) : options.step;
+  switch (event.key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      return clamp(options.value + step, options.min, options.max);
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      return clamp(options.value - step, options.min, options.max);
+    case 'Home':
+      return options.min;
+    case 'End':
+      return options.max;
+    default:
+      return null;
+  }
+}
+
+/** Seconds as spoken text for `aria-valuetext`: `1.5 seconds`. */
+export function describeSeconds(seconds: number): string {
+  const rounded = Math.round(Math.max(0, seconds) * 100) / 100;
+  return `${rounded} ${rounded === 1 ? 'second' : 'seconds'}`;
+}
+
+/** A time on `scale` as spoken text: `1.5 seconds`, or `bar 2, beat 1` (both 1-based). */
+export function describeTime(time: number, scale: Pick<TimeScale, 'unit' | 'beatsPerBar'>): string {
+  if (scale.unit === 'seconds') return describeSeconds(time);
+  const bpb = Math.max(1, scale.beatsPerBar ?? 4);
+  const total = Math.round(Math.max(0, time) * 100) / 100;
+  const bar = Math.floor(total / bpb) + 1;
+  const beat = Math.round((total - (bar - 1) * bpb + 1) * 100) / 100;
+  return `bar ${bar}, beat ${beat}`;
+}
+
 export interface ClipBounds {
   start: number;
   length: number;

package/src/components/TimelineTrack/TimelineTrack.tsx

@@ -1,5 +1,6 @@
 import { Slider as KSlider } from '@kobalte/core';
 import { For, Show, createMemo } from 'solid-js';
+import { describeSeconds } from '../TimelineLanes/lanes-math';
 import { formatSeconds, intervalTicks, markerPercent } from './timeline-math';
 
 export interface TimelineTrackProps {
@@ -19,6 +20,10 @@ export interface TimelineTrackProps {
   showTime?: boolean;
   disabled?: boolean;
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
+  /** The value as a screen reader reads it (default: seconds). */
+  valueText?: (value: number) => string;
   class?: string;
 }
 
@@ -34,6 +39,7 @@ export function TimelineTrack(props: TimelineTrackProps) {
     return [];
   });
   const pct = (t: number) => `${markerPercent(t, min(), props.max)}%`;
+  const valueText = () => (props.valueText ?? describeSeconds)(props.value);
 
   return (
     <div class={props.class ? `zylem-timeline ${props.class}` : 'zylem-timeline'}>
@@ -45,7 +51,6 @@ export function TimelineTrack(props: TimelineTrackProps) {
         maxValue={props.max}
         step={props.step ?? 0.01}
         disabled={props.disabled}
-        getValueLabel={(params) => formatSeconds(params.values[0] ?? 0)}
       >
         <Show when={props.label}>
           <KSlider.Label class="zylem-timeline-label">{props.label}</KSlider.Label>
@@ -75,8 +80,16 @@ export function TimelineTrack(props: TimelineTrackProps) {
               </For>
             </div>
           </Show>
-          <KSlider.Thumb class="zylem-timeline-thumb">
-            <KSlider.Input class="zylem-timeline-thumb-input" />
+          <KSlider.Thumb
+            class="zylem-timeline-thumb"
+            aria-label={props['aria-label']}
+            aria-valuetext={valueText()}
+          >
+            <KSlider.Input
+              class="zylem-timeline-thumb-input"
+              aria-label={props['aria-label']}
+              aria-valuetext={valueText()}
+            />
           </KSlider.Thumb>
         </KSlider.Track>
       </KSlider.Root>

package/src/components/TitleBar/TitleBar.css.ts

@@ -26,6 +26,7 @@ globalStyle('.zylem-titlebar--compact', {
 
 globalStyle('.zylem-titlebar-title', {
   flex: 1,
+  margin: 0,
   fontSize: '13px',
   fontWeight: 700,
   letterSpacing: '0.02em',

package/src/components/TitleBar/TitleBar.tsx

@@ -1,11 +1,14 @@
 import { Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 import { WindowControls, type WindowControlsProps } from '../WindowControls/WindowControls';
 
 export interface TitleBarProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title' | 'onClose'>,
     WindowControlsProps {
   title?: JSX.Element;
+  /** Heading level of the title (default 2). */
+  headingLevel?: HeadingLevel;
   /** Smaller 32px bar for panel headers. */
   compact?: boolean;
   /** Show grab cursor for draggable bars. */
@@ -21,6 +24,7 @@ export interface TitleBarProps
 export function TitleBar(props: TitleBarProps) {
   const [local, rest] = splitProps(props, [
     'title',
+    'headingLevel',
     'compact',
     'draggable',
     'children',
@@ -45,7 +49,9 @@ export function TitleBar(props: TitleBarProps) {
   return (
     <div class={classes()} {...rest}>
       <Show when={local.title}>
-        <span class="zylem-titlebar-title">{local.title}</span>
+        <Heading level={local.headingLevel ?? 2} class="zylem-titlebar-title">
+          {local.title}
+        </Heading>
       </Show>
       {local.children}
       <WindowControls

package/src/components/Toast/Toast.tsx

@@ -25,8 +25,7 @@ export function Toast(props: ToastProps) {
     <Show when={props.message}>
       <div
         class={props.class ? `zylem-toast ${props.class}` : 'zylem-toast'}
-        role="status"
-        aria-live="polite"
+        role={props.tone === 'error' ? 'alert' : 'status'}
         data-tone={props.tone}
         data-position={props.position}
       >

package/src/components/ToolButton/ToolButton.tsx

@@ -81,7 +81,7 @@ export function ToolButton(props: ToolButtonProps) {
   return (
     <ToolbarButton
       label={label()}
-      selected={props.selected}
+      pressed={props.selected ?? false}
       disabled={props.disabled}
       onClick={props.onClick}
       class={props.class ? `zylem-tool-btn ${props.class}` : 'zylem-tool-btn'}

package/src/components/Toolbar/Toolbar.tsx

@@ -23,7 +23,12 @@ export function Toolbar(props: ToolbarProps) {
       .join(' ');
 
   return (
-    <div role="toolbar" class={classes()} {...rest}>
+    <div
+      role="toolbar"
+      aria-orientation={local.orientation === 'vertical' ? 'vertical' : undefined}
+      class={classes()}
+      {...rest}
+    >
       {local.children}
     </div>
   );

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -5,7 +5,13 @@ import { useLayer } from '../../layers';
 export interface ToolbarButtonProps {
   label: string;
   onClick?: (event: MouseEvent) => void;
+  /**
+   * The selected look alone, for a button whose label already says its state
+   * (Play / Pause). For a toggle with a constant label, use `pressed`.
+   */
   selected?: boolean;
+  /** Makes the button a toggle: the state is exposed as `aria-pressed` and drawn as selected. */
+  pressed?: boolean;
   disabled?: boolean;
   children: JSX.Element;
   class?: string;
@@ -13,7 +19,7 @@ export interface ToolbarButtonProps {
 
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
- * Selected state renders as a live-green jewel.
+ * Selected and pressed states render as a live-green jewel.
  *
  * The tooltip portals into the layer container for its own tree, so it stays
  * styled when the toolbar lives inside a web component's shadow root.
@@ -26,6 +32,7 @@ export function ToolbarButton(props: ToolbarButtonProps) {
       <KTooltip.Trigger as="span" ref={layer.anchorRef}>
         <KButton.Root
           aria-label={props.label}
+          aria-pressed={props.pressed}
           onClick={props.onClick}
           disabled={props.disabled}
           class={
@@ -33,7 +40,7 @@ export function ToolbarButton(props: ToolbarButtonProps) {
               ? `zylem-toolbar-btn ${props.class}`
               : 'zylem-toolbar-btn'
           }
-          data-selected={props.selected ? '' : undefined}
+          data-selected={props.selected || props.pressed ? '' : undefined}
         >
           {props.children}
         </KButton.Root>

package/src/components/ToolboxButton/ToolboxButton.tsx

@@ -11,6 +11,7 @@ export interface ToolboxButtonProps {
   label: string;
   /** Icon rendered above the label. */
   children: JSX.Element;
+  /** Given at all, the tile is a toggle and exposes this as `aria-pressed`. */
   selected?: boolean;
   disabled?: boolean;
   /** Overrides the size inherited from the enclosing `ToolboxGrid`. */
@@ -29,7 +30,7 @@ export function ToolboxButton(props: ToolboxButtonProps) {
       class={props.class ? `zylem-toolbox-btn ${props.class}` : 'zylem-toolbox-btn'}
       data-size={props.size}
       data-selected={props.selected ? '' : undefined}
-      aria-pressed={props.selected ? 'true' : undefined}
+      aria-pressed={props.selected}
       disabled={props.disabled}
       onClick={props.onClick}
     >

package/src/components/TrackHeader/TrackHeader.css.ts

@@ -61,6 +61,27 @@ globalStyle('.zylem-track-header-name', {
   textOverflow: 'ellipsis',
 });
 
+// A selectable header's name is a button that still reads as the name.
+globalStyle('button.zylem-track-header-name', {
+  appearance: 'none',
+  minWidth: 0,
+  margin: 0,
+  padding: 0,
+  border: 0,
+  background: 'none',
+  color: 'inherit',
+  fontFamily: 'inherit',
+  lineHeight: 'inherit',
+  textAlign: 'start',
+  cursor: 'inherit',
+});
+
+globalStyle('button.zylem-track-header-name:focus-visible', {
+  outline: 'none',
+  borderRadius: '3px',
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-track-header[data-muted] .zylem-track-header-name', {
   color: vars.colors.textSecondary,
 });

package/src/components/TrackHeader/TrackHeader.tsx

@@ -11,6 +11,7 @@ export interface TrackHeaderProps {
   /** Secondary line under the name (instrument preset, camera kind). */
   detail?: string;
   selected?: boolean;
+  /** Pointer down anywhere on the header; given, the name is also a button for the keyboard. */
   onSelect?: () => void;
   /** Double-click the name to rename; the new name arrives here on Enter/blur. */
   onRename?: (name: string) => void;
@@ -47,6 +48,31 @@ export function TrackHeader(props: TrackHeaderProps) {
     if (next && next !== props.name) props.onRename?.(next);
   };
 
+  const name = () => (
+    <Show
+      when={props.onSelect}
+      fallback={
+        <span class="zylem-track-header-name" onDblClick={startRename} title={props.name}>
+          {props.name}
+        </span>
+      }
+    >
+      <button
+        type="button"
+        class="zylem-track-header-name"
+        aria-current={props.selected ? 'true' : undefined}
+        title={props.name}
+        onClick={(event) => {
+          // The pointer selected on pointer down; keys and assistive tech click without one.
+          if (event.detail === 0) props.onSelect?.();
+        }}
+        onDblClick={startRename}
+      >
+        {props.name}
+      </button>
+    </Show>
+  );
+
   return (
     <div
       class={props.class ? `zylem-track-header ${props.class}` : 'zylem-track-header'}
@@ -54,6 +80,8 @@ export function TrackHeader(props: TrackHeaderProps) {
       data-selected={props.selected ? '' : undefined}
       data-muted={props.muted ? '' : undefined}
       data-disabled={props.disabled ? '' : undefined}
+      role="group"
+      aria-label={props.name}
       onPointerDown={() => props.onSelect?.()}
     >
       <span class="zylem-track-header-swatch" aria-hidden="true" />
@@ -62,14 +90,7 @@ export function TrackHeader(props: TrackHeaderProps) {
           <Show when={props.icon}>
             <span class="zylem-track-header-icon">{props.icon}</span>
           </Show>
-          <Show
-            when={editing()}
-            fallback={
-              <span class="zylem-track-header-name" onDblClick={startRename} title={props.name}>
-                {props.name}
-              </span>
-            }
-          >
+          <Show when={editing()} fallback={name()}>
             <input
               class="zylem-track-header-input"
               value={draft()}
@@ -95,7 +116,7 @@ export function TrackHeader(props: TrackHeaderProps) {
             class="zylem-track-toggle"
             data-kind="mute"
             aria-pressed={props.muted ? 'true' : 'false'}
-            aria-label={props.muted ? 'Unmute' : 'Mute'}
+            aria-label="Mute"
             title={props.muted ? 'Unmute' : 'Mute'}
             disabled={props.disabled}
             onPointerDown={(event) => event.stopPropagation()}
@@ -110,7 +131,7 @@ export function TrackHeader(props: TrackHeaderProps) {
             class="zylem-track-toggle"
             data-kind="solo"
             aria-pressed={props.solo ? 'true' : 'false'}
-            aria-label={props.solo ? 'Unsolo' : 'Solo'}
+            aria-label="Solo"
             title={props.solo ? 'Unsolo' : 'Solo'}
             disabled={props.disabled}
             onPointerDown={(event) => event.stopPropagation()}
@@ -125,13 +146,17 @@ export function TrackHeader(props: TrackHeaderProps) {
             class="zylem-track-toggle"
             data-kind="lock"
             aria-pressed={props.locked ? 'true' : 'false'}
-            aria-label={props.locked ? 'Unlock' : 'Lock'}
+            aria-label="Lock"
             title={props.locked ? 'Unlock' : 'Lock'}
             disabled={props.disabled}
             onPointerDown={(event) => event.stopPropagation()}
             onClick={() => props.onToggleLock?.()}
           >
-            {props.locked ? <Lock class="zylem-icon" /> : <LockOpen class="zylem-icon" />}
+            {props.locked ? (
+              <Lock class="zylem-icon" aria-hidden="true" />
+            ) : (
+              <LockOpen class="zylem-icon" aria-hidden="true" />
+            )}
           </button>
         </Show>
         <Show when={props.actions}>

package/src/components/TransportBar/TransportBar.tsx

@@ -3,7 +3,7 @@ import { type JSX, Show } from 'solid-js';
 import { NumberField } from '../NumberField/NumberField';
 import { PlaybackControls } from '../PlaybackControls/PlaybackControls';
 import { Select } from '../Select/Select';
-import { formatBeats, formatClock, type TimeUnit } from '../TimelineLanes/lanes-math';
+import { describeTime, formatBeats, formatClock, type TimeUnit } from '../TimelineLanes/lanes-math';
 import { TimelineTrack } from '../TimelineTrack/TimelineTrack';
 import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 
@@ -107,6 +107,8 @@ export function TransportBar(props: TransportBarProps) {
           max={props.length}
           onChange={(value) => props.onSeek?.(value)}
           disabled={props.disabled || !props.onSeek}
+          aria-label="Position"
+          valueText={(value) => describeTime(value, { unit: unit(), beatsPerBar: bpb() })}
           class="zylem-transport-track"
         />
         <span class="zylem-transport-time" aria-live="off">
@@ -133,6 +135,7 @@ export function TransportBar(props: TransportBarProps) {
         <Show when={props.timeSignature}>
           {(signature) => (
             <Select
+              aria-label="Time signature"
               options={signatureOptions()}
               value={signatureKey(signature())}
               disabled={props.disabled || !props.onTimeSignatureChange}

package/src/components/Waveform/Waveform.css.ts

@@ -66,6 +66,16 @@ globalStyle('.zylem-waveform-edge::after', {
   boxSizing: 'border-box',
 });
 
+// The ring goes on the grip: around the full-height edge it would be clipped.
+globalStyle('.zylem-waveform-edge:focus-visible', {
+  outline: 'none',
+  boxShadow: 'none',
+});
+
+globalStyle('.zylem-waveform-edge:focus-visible::after', {
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-waveform-playhead', {
   position: 'absolute',
   top: 0,