@zylem/ui 0.8.13 → 0.9.0

package/src/components/Waveform/Waveform.tsx

@@ -1,7 +1,15 @@
-import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js';
-import { clamp } from '../TimelineLanes/lanes-math';
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
+import { clamp, describeSeconds, sliderKeyValue } from '../TimelineLanes/lanes-math';
 import { computePeaks, peaksFromAudioBuffer } from './peaks';
 
+/** Seconds the trim edges must stay apart. */
+const MIN_REGION = 0.01;
+
+const EDGES = [
+  { edge: 'start', label: 'Trim start' },
+  { edge: 'end', label: 'Trim end' },
+] as const;
+
 export type { PeakSource } from './peaks';
 
 export interface WaveformRegion {
@@ -17,7 +25,10 @@ export interface WaveformProps {
   buffer?: { duration: number; numberOfChannels: number; getChannelData(channel: number): Float32Array };
   /** Seconds the peaks span; defaults to `buffer.duration`. Needed for regions and the playhead. */
   duration?: number;
-  /** Highlighted span with draggable edges. */
+  /**
+   * Highlighted span with draggable edges. Focused, an edge also takes the
+   * arrow keys (1% of the duration, 10% with Shift) and Home / End.
+   */
   region?: WaveformRegion;
   onRegionChange?: (region: WaveformRegion) => void;
   onRegionCommit?: (region: WaveformRegion) => void;
@@ -106,14 +117,15 @@ export function Waveform(props: WaveformProps) {
     event.preventDefault();
     event.stopPropagation();
     const target = event.currentTarget as HTMLElement;
+    target.focus({ preventScroll: true });
     target.setPointerCapture?.(event.pointerId);
     let last = region;
     const move = (moveEvent: PointerEvent) => {
       const seconds = secondsAt(moveEvent.clientX);
       last =
         edge === 'start'
-          ? { start: Math.min(seconds, region.end - 0.01), end: region.end }
-          : { start: region.start, end: Math.max(seconds, region.start + 0.01) };
+          ? { start: Math.min(seconds, region.end - MIN_REGION), end: region.end }
+          : { start: region.start, end: Math.max(seconds, region.start + MIN_REGION) };
       props.onRegionChange?.(last);
     };
     const stop = () => {
@@ -128,6 +140,29 @@ export function Waveform(props: WaveformProps) {
     target.addEventListener('pointercancel', stop);
   };
 
+  /** The span each edge may move in, short of crossing the other edge. */
+  const edgeBounds = (edge: 'start' | 'end', region: WaveformRegion) =>
+    edge === 'start'
+      ? { min: 0, max: Math.max(0, region.end - MIN_REGION) }
+      : { min: Math.min(duration(), region.start + MIN_REGION), max: duration() };
+
+  const nudgeEdge = (edge: 'start' | 'end') => (event: KeyboardEvent) => {
+    const region = props.region;
+    if (props.disabled || !region) return;
+    const next = sliderKeyValue(event, {
+      value: region[edge],
+      ...edgeBounds(edge, region),
+      step: duration() / 100,
+    });
+    if (next === null) return;
+    event.preventDefault();
+    // Page-level shortcuts (Home to rewind, arrows to seek) must not also act on it.
+    event.stopPropagation();
+    const changed = { ...region, [edge]: next };
+    props.onRegionChange?.(changed);
+    props.onRegionCommit?.(changed);
+  };
+
   return (
     <div
       ref={host}
@@ -153,28 +188,25 @@ export function Waveform(props: WaveformProps) {
                 class="zylem-waveform-shade"
                 style={{ left: `${percent(region().end)}%`, right: 0 }}
               />
-              <div
-                class="zylem-waveform-edge"
-                data-edge="start"
-                style={{ left: `${percent(region().start)}%` }}
-                onPointerDown={beginRegionDrag('start')}
-                role="slider"
-                aria-label="Trim start"
-                aria-valuenow={region().start}
-                aria-valuemin={0}
-                aria-valuemax={duration()}
-              />
-              <div
-                class="zylem-waveform-edge"
-                data-edge="end"
-                style={{ left: `${percent(region().end)}%` }}
-                onPointerDown={beginRegionDrag('end')}
-                role="slider"
-                aria-label="Trim end"
-                aria-valuenow={region().end}
-                aria-valuemin={0}
-                aria-valuemax={duration()}
-              />
+              <For each={EDGES}>
+                {(edge) => (
+                  <div
+                    class="zylem-waveform-edge"
+                    data-edge={edge.edge}
+                    style={{ left: `${percent(region()[edge.edge])}%` }}
+                    onPointerDown={beginRegionDrag(edge.edge)}
+                    onKeyDown={nudgeEdge(edge.edge)}
+                    role="slider"
+                    tabIndex={props.disabled ? -1 : 0}
+                    aria-label={edge.label}
+                    aria-valuenow={region()[edge.edge]}
+                    aria-valuemin={edgeBounds(edge.edge, region()).min}
+                    aria-valuemax={edgeBounds(edge.edge, region()).max}
+                    aria-valuetext={describeSeconds(region()[edge.edge])}
+                    aria-disabled={props.disabled ? 'true' : undefined}
+                  />
+                )}
+              </For>
             </>
           );
         }}

package/src/components/WindowControls/WindowControls.tsx

@@ -23,7 +23,7 @@ export interface WindowControlsProps {
 export function WindowControls(props: WindowControlsProps) {
   return (
     <Show when={props.onClose || props.onCollapse}>
-      <div class="zylem-window-controls" aria-label="Window controls">
+      <div class="zylem-window-controls" role="group" aria-label="Window controls">
         <Show when={props.onCollapse}>
           <button
             type="button"
@@ -33,9 +33,9 @@ export function WindowControls(props: WindowControlsProps) {
             onClick={() => props.onCollapse?.()}
           >
             {props.collapsed ? (
-              <ChevronUp size={11} strokeWidth={2.5} />
+              <ChevronUp size={11} strokeWidth={2.5} aria-hidden="true" />
             ) : (
-              <ChevronDown size={11} strokeWidth={2.5} />
+              <ChevronDown size={11} strokeWidth={2.5} aria-hidden="true" />
             )}
           </button>
         </Show>
@@ -48,7 +48,7 @@ export function WindowControls(props: WindowControlsProps) {
             data-testid={props.closeTestId}
             onClick={() => props.onClose?.()}
           >
-            <X size={11} strokeWidth={2.5} />
+            <X size={11} strokeWidth={2.5} aria-hidden="true" />
           </button>
         </Show>
       </div>

package/src/components/index.ts

@@ -24,6 +24,7 @@ export {
 } from '../layers';
 
 // Primitives
+export { type HeadingLevel } from './shared/Heading';
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button/Button';
 export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton/ToolbarButton';
 export { TextField, type TextFieldProps } from './TextField/TextField';

package/src/components/shared/Heading.tsx

@@ -0,0 +1,30 @@
+import type { JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+
+/** Outline level of a component's title: `2` renders an `<h2>`. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** The element name for a level, for primitives that take an `as` tag. */
+export function headingTag(level: HeadingLevel) {
+  return `h${level}` as const;
+}
+
+export interface HeadingProps {
+  level: HeadingLevel;
+  id?: string | undefined;
+  class?: string | undefined;
+  title?: string | undefined;
+  children: JSX.Element;
+}
+
+/**
+ * An `<h1>`…`<h6>` chosen at runtime, for titles whose place in the page
+ * outline is the host's call.
+ */
+export function Heading(props: HeadingProps) {
+  return (
+    <Dynamic component={headingTag(props.level)} id={props.id} class={props.class} title={props.title}>
+      {props.children}
+    </Dynamic>
+  );
+}

package/src/global/accordion.css.ts

@@ -14,11 +14,14 @@ globalStyle('.zylem-accordion', {
   minHeight: 0,
 });
 
+// The header is a heading element; its UA margins would open gaps around the
+// trigger, and differ by heading level.
 globalStyle('.accordion-header', {
   position: 'sticky',
   top: 0,
   zIndex: 1,
   display: 'flex',
+  margin: 0,
 });
 
 globalStyle('.accordion-item', {
@@ -105,7 +108,9 @@ globalStyle('.zylem-accordion--stack .accordion-content', {
 });
 
 globalStyle('.accordion-trigger::after', {
-  content: "'\\25BC'",
+  // The empty alternative text keeps the chevron out of the trigger's
+  // accessible name; the first value is for browsers without that syntax.
+  content: ["'\\25BC'", "'\\25BC' / ''"],
   position: 'relative',
   color: vars.colors.textSecondary,
   fontSize: '10px',

package/src/global/common.css.ts

@@ -13,6 +13,19 @@ globalStyle('.overlay', {
   pointerEvents: 'none',
 });
 
+// Text for assistive tech only: off screen, still in the accessibility tree.
+globalStyle('.zylem-visually-hidden', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
 // Default scrollbars: slim glass rail (use `.zylem-scroll` for the full
 // 13px HyperGlass treatment defined in hyperglass-base.css.ts).
 globalStyle('::-webkit-scrollbar', {

package/src/layers/LayerContext.tsx

@@ -60,8 +60,8 @@ export interface LayerScopeProps {
  * them can paint above anything outside; and the scope owns the portal container
  * its descendants mount into, so overlays opened inside it stay inside it.
  *
- * A dialog wraps its content in one, so a tooltip opened within the dialog floats
- * over the dialog body without also floating over a menu belonging to the page.
+ * A dialog puts its card in one, so a menu opened within the dialog mounts
+ * inside the `<dialog>`, floats over the card, and is not clipped by it.
  */
 export function LayerScope(props: LayerScopeProps) {
 	const [container, setContainer] = createSignal<HTMLElement>();