@zylem/ui 0.8.14 → 0.9.0

package/src/components/Mixer/Knob.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Show } from 'solid-js';
+import { createSignal, createUniqueId, Show } from 'solid-js';
 import { clamp } from '../TimelineLanes/lanes-math';
 
 export interface KnobProps {
@@ -11,7 +11,10 @@ export interface KnobProps {
   step?: number;
   /** Double-click resets to this. */
   defaultValue?: number;
+  /** Caption under the knob, which also names it. */
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   /** Readout under the knob; defaults to the value with `step` precision. */
   format?: (value: number) => string;
   /** Draw the arc from the centre (for pan and other ±ranges). */
@@ -48,6 +51,7 @@ export function Knob(props: KnobProps) {
   const max = () => props.max ?? 1;
   const step = () => props.step ?? (max() - min()) / 100;
   const size = () => props.size ?? 36;
+  const labelId = createUniqueId();
   const ratio = () => (max() > min() ? clamp((props.value - min()) / (max() - min()), 0, 1) : 0);
   const angle = () => START_ANGLE + ratio() * SWEEP;
   const zeroAngle = () =>
@@ -147,7 +151,8 @@ export function Knob(props: KnobProps) {
         class="zylem-knob-dial"
         role="slider"
         tabIndex={props.disabled ? -1 : 0}
-        aria-label={props.label}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : props['aria-label']}
         aria-valuemin={min()}
         aria-valuemax={max()}
         aria-valuenow={props.value}
@@ -180,7 +185,9 @@ export function Knob(props: KnobProps) {
         </svg>
       </div>
       <Show when={props.label}>
-        <span class="zylem-knob-label">{props.label}</span>
+        <span id={labelId} class="zylem-knob-label">
+          {props.label}
+        </span>
       </Show>
       <span class="zylem-knob-value">{readout()}</span>
     </div>

package/src/components/Mixer/Mixer.css.ts

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

package/src/components/Mixer/MixerStrip.tsx

@@ -26,6 +26,7 @@ export interface MixerStripProps {
   /** Wider strip with a stronger label; for the master bus. */
   master?: boolean;
   selected?: boolean;
+  /** Pointer down anywhere on the strip; given, the name is also a button for the keyboard. */
   onSelect?: () => void;
   disabled?: boolean;
   class?: string;
@@ -52,6 +53,7 @@ export function formatPan(value: number): string {
 export function MixerStrip(props: MixerStripProps) {
   const min = () => props.minVolume ?? -60;
   const max = () => props.maxVolume ?? 6;
+  const volumeText = () => formatDb(clamp(props.volume, min(), max()), min());
 
   return (
     <div
@@ -61,6 +63,8 @@ export function MixerStrip(props: MixerStripProps) {
       data-selected={props.selected ? '' : undefined}
       data-disabled={props.disabled ? '' : undefined}
       data-muted={props.muted ? '' : undefined}
+      role="group"
+      aria-label={props.name}
       onPointerDown={() => props.onSelect?.()}
     >
       <Show when={props.pan !== undefined}>
@@ -91,14 +95,13 @@ export function MixerStrip(props: MixerStripProps) {
           disabled={props.disabled}
           onChange={(values) => props.onVolumeChange?.(values[0] ?? min())}
           onChangeEnd={(values) => props.onVolumeCommit?.(values[0] ?? min())}
-          getValueLabel={(params) => formatDb(params.values[0] ?? min(), min())}
         >
           <KSlider.Label class="zylem-fader-sr">{`${props.name} volume`}</KSlider.Label>
           <KSlider.Track class="zylem-fader-track">
             <KSlider.Fill class="zylem-fader-fill" />
             <span class="zylem-fader-zero" aria-hidden="true" />
-            <KSlider.Thumb class="zylem-fader-thumb">
-              <KSlider.Input class="zylem-fader-sr" />
+            <KSlider.Thumb class="zylem-fader-thumb" aria-valuetext={volumeText()}>
+              <KSlider.Input class="zylem-fader-sr" aria-valuetext={volumeText()} />
             </KSlider.Thumb>
           </KSlider.Track>
         </KSlider.Root>
@@ -117,7 +120,7 @@ export function MixerStrip(props: MixerStripProps) {
             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()}
@@ -132,7 +135,7 @@ export function MixerStrip(props: MixerStripProps) {
             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()}
@@ -142,9 +145,27 @@ export function MixerStrip(props: MixerStripProps) {
           </button>
         </Show>
       </div>
-      <span class="zylem-mixer-name" title={props.name}>
-        {props.name}
-      </span>
+      <Show
+        when={props.onSelect}
+        fallback={
+          <span class="zylem-mixer-name" title={props.name}>
+            {props.name}
+          </span>
+        }
+      >
+        <button
+          type="button"
+          class="zylem-mixer-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?.();
+          }}
+        >
+          {props.name}
+        </button>
+      </Show>
     </div>
   );
 }

package/src/components/NumberField/NumberField.tsx

@@ -3,6 +3,8 @@ import { Show } from 'solid-js';
 
 export interface NumberFieldProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   error?: string;
   value?: number;
   onChange?: (value: number) => void;
@@ -45,19 +47,20 @@ export function NumberField(props: NumberFieldProps) {
       <div class="zylem-numberfield-group">
         <KNumberField.Input
           class="zylem-field zylem-numberfield-input"
+          aria-label={props['aria-label']}
           placeholder={props.placeholder}
         />
         <KNumberField.IncrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--up"
           aria-label="Increment"
         >
-          ▲
+          <span aria-hidden="true">▲</span>
         </KNumberField.IncrementTrigger>
         <KNumberField.DecrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--down"
           aria-label="Decrement"
         >
-          ▼
+          <span aria-hidden="true">▼</span>
         </KNumberField.DecrementTrigger>
       </div>
       <Show when={props.error}>

package/src/components/Panel/Panel.css.ts

@@ -65,6 +65,7 @@ globalStyle('.zylem-panel-header', {
 });
 
 globalStyle('.zylem-panel-header-title', {
+  margin: 0,
   fontSize: '11px',
   fontWeight: 700,
   letterSpacing: '0.09em',

package/src/components/Panel/Panel.tsx

@@ -1,10 +1,13 @@
 import { Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 
 export interface PanelProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
   /** Optional glossy header title. */
   title?: JSX.Element;
+  /** Heading level of the title (default 2). */
+  headingLevel?: HeadingLevel;
   /** Extra content rendered on the right side of the header. */
   headerActions?: JSX.Element;
   /** Use the brighter window-glass treatment. */
@@ -28,6 +31,7 @@ export interface PanelProps
 export function Panel(props: PanelProps) {
   const [local, rest] = splitProps(props, [
     'title',
+    'headingLevel',
     'headerActions',
     'window',
     'flush',
@@ -51,7 +55,11 @@ export function Panel(props: PanelProps) {
     <div class={classes()} {...rest}>
       <Show when={local.title || local.headerActions}>
         <div class="zylem-panel-header">
-          <span class="zylem-panel-header-title">{local.title}</span>
+          <Show when={local.title} fallback={<span class="zylem-panel-header-title" />}>
+            <Heading level={local.headingLevel ?? 2} class="zylem-panel-header-title">
+              {local.title}
+            </Heading>
+          </Show>
           {local.headerActions}
         </div>
       </Show>

package/src/components/PianoRoll/PianoRoll.tsx

@@ -219,6 +219,7 @@ export function PianoRoll(props: PianoRollProps) {
       tabIndex={0}
       role="application"
       aria-label="Piano roll"
+      aria-disabled={props.disabled ? 'true' : undefined}
       data-disabled={props.disabled ? '' : undefined}
       data-dragging={dragging() ? '' : undefined}
       onKeyDown={handleKeyDown}

package/src/components/Progress/Progress.tsx

@@ -6,6 +6,8 @@ export interface ProgressProps {
   minValue?: number;
   maxValue?: number;
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   showValue?: boolean;
   indeterminate?: boolean;
   class?: string;
@@ -22,6 +24,7 @@ export function Progress(props: ProgressProps) {
       minValue={props.minValue}
       maxValue={props.maxValue}
       indeterminate={props.indeterminate}
+      aria-label={props['aria-label']}
     >
       <Show when={props.label || props.showValue}>
         <div class="zylem-progress-header">

package/src/components/Property/Property.css.ts

@@ -57,13 +57,26 @@ globalStyle('.zylem-property-value', {
   whiteSpace: 'nowrap',
 });
 
+// A button that should read as the value text it stands in for.
 globalStyle('.zylem-property-value--clickable', {
+  appearance: 'none',
+  margin: 0,
+  padding: 0,
+  border: 0,
+  background: 'none',
+  lineHeight: 'inherit',
+  textAlign: 'start',
   cursor: 'pointer',
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textUnderlineOffset: '2px',
 });
 
+globalStyle('.zylem-property-value--clickable:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-property-value--clickable:hover', {
   textDecorationStyle: 'solid',
   color: vars.colors.active,

package/src/components/Property/Property.tsx

@@ -107,7 +107,8 @@ export function PropertyRow(props: PropertyRowProps) {
           </span>
         }
       >
-        <span
+        <button
+          type="button"
           class={`zylem-property-value zylem-property-value--clickable ${props.valueClass ?? ''}`}
           onClick={() => {
             const fullValue = display().fullValue;
@@ -116,7 +117,7 @@ export function PropertyRow(props: PropertyRowProps) {
           title="Click to reveal full path"
         >
           {display().element}
-        </span>
+        </button>
       </Show>
     </div>
   );

package/src/components/SearchInput/SearchInput.tsx

@@ -18,7 +18,7 @@ export interface SearchInputProps {
 export function SearchInput(props: SearchInputProps) {
   return (
     <div class={props.class ? `zylem-search ${props.class}` : 'zylem-search'}>
-      <Search class="zylem-search-icon" />
+      <Search class="zylem-search-icon" aria-hidden="true" />
       <input
         type="search"
         ref={props.ref}

package/src/components/Select/Select.tsx

@@ -13,6 +13,8 @@ export interface SelectProps {
   value?: string;
   onChange?: (value: string | null) => void;
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   placeholder?: string;
   disabled?: boolean;
   name?: string;
@@ -55,7 +57,7 @@ export function Select(props: SelectProps) {
       <KSelect.Trigger
         ref={layer.anchorRef}
         class="zylem-field zylem-select-trigger"
-        aria-label={props.label}
+        aria-label={props['aria-label']}
       >
         <KSelect.Value<SelectOption> class="zylem-select-value">
           {(state) => state.selectedOption()?.label}

package/src/components/Sidebar/Sidebar.css.ts

@@ -34,6 +34,7 @@ globalStyle('.sidebar-section', {
 });
 
 globalStyle('.sidebar-section-title', {
+  margin: 0,
   padding: `${vars.spacing.sm} ${vars.spacing.md} ${vars.spacing.xs}`,
   fontSize: '10px',
   fontWeight: 700,

package/src/components/Sidebar/Sidebar.tsx

@@ -1,8 +1,15 @@
-import { Show, splitProps } from 'solid-js';
+import { createUniqueId, Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 
 export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
   children?: JSX.Element;
+  /**
+   * Landmark element: `aside` (the default) for a rail beside the main
+   * content, `nav` when the rail is the page's navigation.
+   */
+  as?: 'aside' | 'nav';
   /**
    * Drop the glass surface and trailing border so the list sits inside a
    * panel that already draws them (an inspector rail, a dialog column).
@@ -16,34 +23,43 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
  * and `SidebarItem`.
  */
 export function Sidebar(props: SidebarProps) {
-  const [local, rest] = splitProps(props, ['children', 'class', 'borderless']);
+  const [local, rest] = splitProps(props, ['children', 'class', 'borderless', 'as']);
   return (
-    <aside
+    <Dynamic
+      component={local.as ?? 'aside'}
       class={['sidebar', 'zylem-scroll', local.borderless ? 'sidebar--borderless' : '', local.class ?? '']
         .filter(Boolean)
         .join(' ')}
       {...rest}
     >
       {local.children}
-    </aside>
+    </Dynamic>
   );
 }
 
 export interface SidebarSectionProps {
   title?: JSX.Element;
+  /** Heading level of the title (default 2). */
+  headingLevel?: HeadingLevel;
   children?: JSX.Element;
   class?: string;
 }
 
+/** A titled group of items; the title names the group for assistive tech. */
 export function SidebarSection(props: SidebarSectionProps) {
+  const titleId = createUniqueId();
   return (
     <div
       class={
         props.class ? `sidebar-section ${props.class}` : 'sidebar-section'
       }
+      role={props.title ? 'group' : undefined}
+      aria-labelledby={props.title ? titleId : undefined}
     >
       <Show when={props.title}>
-        <div class="sidebar-section-title">{props.title}</div>
+        <Heading level={props.headingLevel ?? 2} id={titleId} class="sidebar-section-title">
+          {props.title}
+        </Heading>
       </Show>
       {props.children}
     </div>
@@ -52,6 +68,7 @@ export function SidebarSection(props: SidebarSectionProps) {
 
 export interface SidebarItemProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The current item; exposed as `aria-current="true"`. */
   active?: boolean;
   children?: JSX.Element;
 }
@@ -63,6 +80,7 @@ export function SidebarItem(props: SidebarItemProps) {
       type="button"
       class={local.class ? `sidebar-item ${local.class}` : 'sidebar-item'}
       data-active={local.active ? '' : undefined}
+      aria-current={local.active ? 'true' : undefined}
       {...rest}
     >
       {local.children}

package/src/components/Slider/Slider.tsx

@@ -3,6 +3,8 @@ import { Show } from 'solid-js';
 
 export interface SliderProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   value?: number;
   onChange?: (value: number) => void;
   /**
@@ -48,8 +50,8 @@ export function Slider(props: SliderProps) {
       </Show>
       <KSlider.Track class="zylem-slider-track">
         <KSlider.Fill class="zylem-slider-fill" />
-        <KSlider.Thumb class="zylem-slider-thumb">
-          <KSlider.Input class="zylem-slider-thumb-input" />
+        <KSlider.Thumb class="zylem-slider-thumb" aria-label={props['aria-label']}>
+          <KSlider.Input class="zylem-slider-thumb-input" aria-label={props['aria-label']} />
         </KSlider.Thumb>
       </KSlider.Track>
     </KSlider.Root>

package/src/components/Switch/Switch.tsx

@@ -3,6 +3,8 @@ import { Show } from 'solid-js';
 
 export interface SwitchProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -24,7 +26,7 @@ export function Switch(props: SwitchProps) {
       disabled={props.disabled}
       name={props.name}
     >
-      <KSwitch.Input class="zylem-switch-input" />
+      <KSwitch.Input class="zylem-switch-input" aria-label={props['aria-label']} />
       <KSwitch.Control class="zylem-switch-control">
         <KSwitch.Thumb class="zylem-switch-thumb" />
       </KSwitch.Control>

package/src/components/Tabs/Tabs.css.ts

@@ -102,11 +102,6 @@ globalStyle('.zylem-tabs-close:hover', {
   color: '#FFF4F2',
 });
 
-globalStyle('.zylem-tabs-close:focus-visible', {
-  outline: 'none',
-  boxShadow: vars.effects.focusRing,
-});
-
 globalStyle('.zylem-tabs-content', {
   flex: 1,
   minHeight: 0,

package/src/components/Tabs/Tabs.tsx

@@ -46,12 +46,12 @@ export interface TabsTriggerProps {
   disabled?: boolean;
   class?: string;
   /**
-   * Document-style tabs: shows a close affordance after the label. It is a
-   * `role="button"` span (a button may not nest in the trigger button) and
-   * closing does not select the tab.
+   * Document-style tabs: Delete (Backspace on a Mac keyboard) closes the
+   * focused tab, and a close affordance after the label does the same for the
+   * pointer. Closing does not select the tab.
    */
   onClose?: () => void;
-  /** Accessible name of the close affordance; defaults to `Close tab`. */
+  /** Tooltip of the close affordance; defaults to `Close tab`. */
   closeLabel?: string;
   /** Unsaved-changes marker before the close affordance. */
   dirty?: boolean;
@@ -59,10 +59,22 @@ export interface TabsTriggerProps {
 
 export function TabsTrigger(props: TabsTriggerProps) {
   const close = (event: Event) => {
+    // Stopped so a page-level Delete shortcut does not also act on the key.
     event.stopPropagation();
     event.preventDefault();
     props.onClose?.();
   };
+  const closeFromKeyboard = (event: KeyboardEvent & { currentTarget: HTMLButtonElement }) => {
+    if (!props.onClose || (event.key !== 'Delete' && event.key !== 'Backspace')) return;
+    const trigger = event.currentTarget;
+    const list = trigger.closest('[role="tablist"]');
+    close(event);
+    // A closed tab usually leaves the document, and focus with it.
+    queueMicrotask(() => {
+      if (trigger.isConnected) return;
+      list?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')?.focus();
+    });
+  };
   return (
     <KTabs.Trigger
       class={
@@ -70,25 +82,24 @@ export function TabsTrigger(props: TabsTriggerProps) {
       }
       value={props.value}
       disabled={props.disabled}
+      aria-keyshortcuts={props.onClose ? 'Delete Backspace' : undefined}
+      onKeyDown={closeFromKeyboard}
     >
       <span class="zylem-tabs-trigger-label">{props.children}</span>
       <Show when={props.dirty}>
-        <span class="zylem-tabs-dirty" aria-label="Unsaved changes" title="Unsaved changes" />
+        <span class="zylem-tabs-dirty" aria-hidden="true" title="Unsaved changes" />
+        <span class="zylem-visually-hidden">(unsaved changes)</span>
       </Show>
       <Show when={props.onClose}>
+        {/* Pointer only: a button may not nest in the trigger button, and the key covers it. */}
         <span
           class="zylem-tabs-close"
-          role="button"
-          tabIndex={0}
-          aria-label={props.closeLabel ?? 'Close tab'}
+          aria-hidden="true"
           title={props.closeLabel ?? 'Close tab'}
           onClick={close}
           onPointerDown={(event) => event.stopPropagation()}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') close(event);
-          }}
         >
-          <X aria-hidden="true" />
+          <X />
         </span>
       </Show>
     </KTabs.Trigger>

package/src/components/TextField/TextField.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'solid-js';
 
 export interface TextFieldProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   error?: string;
   placeholder?: string;
   value?: string;
@@ -92,6 +94,7 @@ export function TextField(props: TextFieldProps) {
           <KTextField.Input
             class="zylem-field zylem-textfield-input"
             type={props.type ?? 'text'}
+            aria-label={props['aria-label']}
             placeholder={props.placeholder}
             autofocus={props.autofocus}
             onInput={props.onInput as JSX.EventHandlerUnion<HTMLInputElement, InputEvent>}
@@ -102,6 +105,7 @@ export function TextField(props: TextFieldProps) {
       >
         <KTextField.TextArea
           class="zylem-field zylem-textfield-textarea"
+          aria-label={props['aria-label']}
           placeholder={props.placeholder}
           rows={props.rows}
           autofocus={props.autofocus}

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,