@blotch/dolan 22.2.2 → 22.2.3

package/dist/ui/components/nav-drawer/nav-drawer.ts

@@ -1,5 +1,6 @@
 import {
   type ElementRef,
+  type OnDestroy,
   Component,
   ViewEncapsulation,
   computed,
@@ -28,10 +29,10 @@ import {
 } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 import { UiIcon } from '../icon';
+import { UI_ICON_COLOR } from '../icon/icon-theme';
 
 @Component({
   selector: 'ui-nav-drawer',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -52,6 +53,7 @@ import { UiIcon } from '../icon';
           #panel
           [class]="panelClass()"
           [style]="panelPositionStyle()"
+          [accessibility-exclusive-focus]="overlayVisible()"
           (catchtap)="onPanelTap()"
         >
           <ng-content />
@@ -60,7 +62,7 @@ import { UiIcon } from '../icon';
     </overlay>
   `,
 })
-export class UiNavDrawer {
+export class UiNavDrawer implements OnDestroy {
   readonly open = model(false);
   readonly side = input<'left' | 'right'>('left');
   readonly userClass = input<string>('', { alias: 'class' });
@@ -85,6 +87,9 @@ export class UiNavDrawer {
   #backdropAnim?: AnimationHandle;
   #panelAnim?: AnimationHandle;
   #hasBeenOpen = false;
+  // The open and close sequences' pending timers, so ngOnDestroy can stop
+  // them.
+  readonly #timers = new Set<ReturnType<typeof setTimeout>>();
 
   constructor() {
     // `#hasBeenOpen` prevents the close animation from running on the initial
@@ -135,6 +140,28 @@ export class UiNavDrawer {
     this.open.set(false);
   }
 
+  /**
+   * The drawer can be destroyed while its open or close sequence is still
+   * running, for example by an `@if` around it or a route change right after
+   * closing it. The rest of the sequence then ran on the destroyed component:
+   * it animated detached elements and emitted `closed` from a destroyed
+   * output, which Angular warns about in dev builds (NG0953).
+   */
+  ngOnDestroy(): void {
+    for (const timer of this.#timers) clearTimeout(timer);
+  }
+
+  /**
+   * `setTimeout`, tracked so that ngOnDestroy can cancel it.
+   */
+  #later(callback: () => void, ms: number): void {
+    const timer = setTimeout(() => {
+      this.#timers.delete(timer);
+      callback();
+    }, ms);
+    this.#timers.add(timer);
+  }
+
   /**
    * Two-phase open: first make the overlay visible (so native elements exist),
    * then animate in on the next frame. Without the nested setTimeout, the
@@ -142,9 +169,9 @@ export class UiNavDrawer {
    * yet — Lynx element.animate() requires the element to be in the tree.
    */
   #doOpen(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.overlayVisible.set(true);
-      setTimeout(() => this.#animateIn(), 0);
+      this.#later(() => this.#animateIn(), 0);
     }, 0);
   }
 
@@ -155,9 +182,9 @@ export class UiNavDrawer {
    * cause a visual glitch (elements disappear before fade completes).
    */
   #doClose(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.#animateOut();
-      setTimeout(() => {
+      this.#later(() => {
         this.overlayVisible.set(false);
         this.closed.emit();
       }, DURATION.normal + 20);
@@ -178,6 +205,11 @@ export class UiNavDrawer {
       duration: DURATION.slow,
       easing: EASING.sheet,
     });
+    // Move a screen reader into the panel. It would otherwise stay on whatever
+    // opened it, which is now behind the overlay. With the panel's
+    // accessibility-exclusive-focus (see the template), it then can't leave
+    // the panel until it closes.
+    panel.invoke?.('requestAccessibilityFocus');
   }
 
   #animateOut(): void {
@@ -199,7 +231,6 @@ export class UiNavDrawer {
 
 @Component({
   selector: 'ui-nav-drawer-header',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -229,7 +260,6 @@ export class UiNavDrawerHeader {
 
 @Component({
   selector: 'ui-nav-drawer-content',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   // Fixes: a long item list scrolled nowhere and spilled over the header and
@@ -326,9 +356,21 @@ export class UiNavDrawerContent {
 
 @Component({
   selector: 'ui-nav-drawer-item',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // Icons projected into the item (see the variant below) inject this through
+  // the item's element injector, which content projection keeps them under.
+  providers: [
+    {
+      provide: UI_ICON_COLOR,
+      useFactory: () => {
+        const item = inject(UiNavDrawerItem);
+        return computed(() =>
+          item.variant() === 'destructive' ? 'var(--destructive)' : undefined,
+        );
+      },
+    },
+  ],
   template: `
     <view
       #container
@@ -358,10 +400,18 @@ export class UiNavDrawerItem {
   readonly containerRef = viewChild<ElementRef>('container');
   #pressAnim?: AnimationHandle;
 
+  // `destructive` recolors the item's content, which the item doesn't render
+  // itself: the label and icon are projected. Lynx doesn't inherit `color`, so
+  // a text class here wouldn't reach the label. CSS variables do inherit, so
+  // the item points `--foreground` at `--destructive` for everything inside
+  // it: a label styled `text-foreground` (as items are) turns destructive.
+  // Icons draw with SVG, which can't read CSS, so they get the same color
+  // through UI_ICON_COLOR (see providers above).
   protected readonly containerClass = computed(() =>
     cn(
       'flex-row items-center gap-3 px-4 py-3 flex',
       this.active() ? 'bg-accent' : 'bg-transparent',
+      this.variant() === 'destructive' && '[--foreground:var(--destructive)]',
       this.userClass(),
     ),
   );
@@ -421,7 +471,6 @@ export class UiNavDrawerItem {
 
 @Component({
   selector: 'ui-nav-drawer-footer',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -449,13 +498,17 @@ export class UiNavDrawerFooter {
 
 @Component({
   selector: 'ui-nav-drawer-trigger',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiIcon],
   encapsulation: ViewEncapsulation.None,
   template: `
+    <!-- The trigger is only an icon, so it carries the words a screen reader
+         says for it. -->
     <view
       #container
       [class]="containerClass()"
+      [accessibility-element]="true"
+      accessibility-traits="button"
+      [accessibility-label]="label()"
       (bindtouchstart)="onPressStart()"
       (bindtouchend)="onPressEnd()"
       (bindtouchcancel)="onPressCancel()"
@@ -469,6 +522,8 @@ export class UiNavDrawerFooter {
   `,
 })
 export class UiNavDrawerTrigger {
+  /** What a screen reader says for the trigger. */
+  readonly label = input('Open navigation menu');
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly pressed = output<void>();

package/dist/ui/components/pagination/pagination.test.ts

@@ -1,8 +1,17 @@
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
 import { describe, expect, it } from 'vitest';
 import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { ICON_LIGHT_COLORS } from '../icon/icon-theme';
 import { UiPagination } from './pagination';
 
+/**
+ * The screen reader labels of the row's buttons, in order.
+ */
+const labels = (container: Element): (string | null)[] =>
+  Array.from(container.querySelectorAll('[accessibility-element]')).map((el) =>
+    el.getAttribute('accessibility-label'),
+  );
+
 describe('UiPagination', () => {
   const setup = async (totalPages: number, page = 1, siblingCount = 1) => {
     const { componentRef, container } = await render(UiPagination);
@@ -93,4 +102,57 @@ describe('UiPagination', () => {
     );
     expect(primary).toBeTruthy();
   });
+
+  it('labels every button for screen readers', async () => {
+    const { container } = await setup(3, 2);
+    expect(labels(container)).toEqual([
+      'Previous page',
+      'Page 1',
+      'Page 2, current page',
+      'Page 3',
+      'Next page',
+    ]);
+    const buttons = container.querySelectorAll('[accessibility-element]');
+    for (const button of Array.from(buttons)) {
+      expect(button.getAttribute('accessibility-traits')).toBe('button');
+    }
+  });
+
+  it('takes its own labels', async () => {
+    const { inst, container } = await setup(2, 1);
+    setInputSignal(inst.previousLabel, 'Back');
+    setInputSignal(inst.nextLabel, 'Forward');
+    setInputSignal(inst.pageLabel, (page: number, current: boolean) =>
+      current ? `Results ${page}, showing` : `Results ${page}`,
+    );
+    await waitForUpdate();
+    expect(labels(container)).toEqual([
+      'Back',
+      'Results 1, showing',
+      'Results 2',
+      'Forward',
+    ]);
+  });
+
+  it('hides the gaps from screen readers', async () => {
+    const { container } = await setup(10, 5);
+    const gaps = Array.from(container.querySelectorAll('text'))
+      .filter((el) => el.textContent === '...')
+      .map((el) =>
+        el.parentElement?.getAttribute('accessibility-elements-hidden'),
+      );
+    expect(gaps).toEqual(['true', 'true']);
+  });
+
+  it("draws the arrows in the theme's foreground", async () => {
+    const { container } = await setup(3, 2);
+    const arrows = Array.from(container.querySelectorAll('svg')).map((el) =>
+      el.getAttribute('content'),
+    );
+    expect(arrows).toHaveLength(2);
+    for (const arrow of arrows) {
+      expect(arrow).toContain(ICON_LIGHT_COLORS['foreground']);
+      expect(arrow).not.toContain('currentColor');
+    }
+  });
 });

package/dist/ui/components/pagination/pagination.ts

@@ -8,20 +8,40 @@ import {
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
+import { injectIconColor } from '../icon/icon-theme';
 
 const CHEVRON_LEFT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>`;
 const CHEVRON_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`;
 
+/**
+ * What a screen reader says for a page button, unless `pageLabel` is set.
+ */
+const defaultPageLabel = (page: number, current: boolean): string =>
+  current ? `Page ${page}, current page` : `Page ${page}`;
+
 @Component({
   selector: 'ui-pagination',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // Each button is one accessibility element with a label: without them a
+  // screen reader found the arrows unlabeled (they're only an SVG) and read
+  // each number as plain text, with nothing saying it's a button or which page
+  // is current. The "..." gaps are hidden, since they aren't controls.
+  //
+  // The chevrons are drawn in the theme's foreground, like the page numbers
+  // next to them. An SVG can't read the text color classes, so the color is
+  // resolved and written into the markup (see icon-theme.ts).
   template: `
     <view [class]="containerClass()">
-      <view [class]="navButtonClass(page() <= 1)" (bindtap)="prev()">
+      <view
+        [class]="navButtonClass(page() <= 1)"
+        [accessibility-element]="true"
+        accessibility-traits="button"
+        [accessibility-label]="previousLabel()"
+        (bindtap)="prev()"
+      >
         <svg
-          [attr.content]="chevronLeftSvg"
+          [attr.content]="chevronLeftSvg()"
           style="width: 16px; height: 16px;"
         />
       </view>
@@ -30,6 +50,11 @@ const CHEVRON_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
         @if (item.type === 'page') {
           <view
             [class]="pageButtonClass(item.value === page())"
+            [accessibility-element]="true"
+            accessibility-traits="button"
+            [accessibility-label]="
+              pageLabel()(item.value, item.value === page())
+            "
             (bindtap)="goTo(item.value)"
           >
             <text [class]="pageTextClass(item.value === page())">{{
@@ -37,15 +62,24 @@ const CHEVRON_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
             }}</text>
           </view>
         } @else {
-          <view class="h-8 w-8 items-center flex justify-center">
+          <view
+            class="h-8 w-8 items-center flex justify-center"
+            [accessibility-elements-hidden]="true"
+          >
             <text class="text-xs text-muted-foreground">...</text>
           </view>
         }
       }
 
-      <view [class]="navButtonClass(page() >= totalPages())" (bindtap)="next()">
+      <view
+        [class]="navButtonClass(page() >= totalPages())"
+        [accessibility-element]="true"
+        accessibility-traits="button"
+        [accessibility-label]="nextLabel()"
+        (bindtap)="next()"
+      >
         <svg
-          [attr.content]="chevronRightSvg"
+          [attr.content]="chevronRightSvg()"
           style="width: 16px; height: 16px;"
         />
       </view>
@@ -56,10 +90,23 @@ export class UiPagination {
   readonly page = model(1);
   readonly totalPages = input.required<number>();
   readonly siblingCount = input(1);
+  /** Screen reader label for the previous arrow. */
+  readonly previousLabel = input('Previous page');
+  /** Screen reader label for the next arrow. */
+  readonly nextLabel = input('Next page');
+  /** Screen reader label for a page button, given its page and whether it's current. */
+  readonly pageLabel =
+    input<(page: number, current: boolean) => string>(defaultPageLabel);
   readonly userClass = input<string>('', { alias: 'class' });
 
-  protected readonly chevronLeftSvg = CHEVRON_LEFT;
-  protected readonly chevronRightSvg = CHEVRON_RIGHT;
+  readonly #resolveColor = injectIconColor();
+  // split/join, not replaceAll(): Lynx's main thread (PrimJS, ES2019) lacks it.
+  protected readonly chevronLeftSvg = computed(() =>
+    CHEVRON_LEFT.split('currentColor').join(this.#resolveColor(undefined)),
+  );
+  protected readonly chevronRightSvg = computed(() =>
+    CHEVRON_RIGHT.split('currentColor').join(this.#resolveColor(undefined)),
+  );
 
   // Sliding-window pagination algorithm:
   // Always shows page 1 and the last page. Around the current page, shows

package/dist/ui/components/scatter-chart/index.ts

@@ -1,6 +1,5 @@
 export {
+  type ScatterChartOptions,
   UiScatterChart,
-  UiScatterSeries,
-  computeDots,
-  type DotShape,
+  scatterChartDefinition,
 } from './scatter-chart';

package/dist/ui/components/scatter-chart/scatter-chart-render.test.ts

@@ -1,157 +1,64 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { render } from '@blotch/angular-lynx-testing-library';
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import type {
+  ChartDefinition,
+  ChartPoint,
+  SceneDot,
+  SceneNode,
+} from '@tanstack/charts/types';
 import { describe, expect, it, vi } from 'vitest';
 import { setInputSignal } from '../../../test-utils/set-input-signal';
-import { UiCartesianChart } from '../cartesian-chart/cartesian-chart';
-import { UiScatterChart, UiScatterSeries } from './scatter-chart';
+import { UiScatterChart } from './scatter-chart';
 
-describe('UiScatterChart', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiScatterChart);
-    expect(container).toBeTruthy();
-  });
+const data = [
+  { x: 150, y: 50 },
+  { x: 160, y: 65 },
+  { x: 170, y: 70 },
+];
 
-  it('derives axis domains from the data extremes', async () => {
-    const { componentRef } = await render(UiScatterChart);
-    const inst = componentRef.instance as UiScatterChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 0 },
-      { x: 5, y: 8 },
-      { x: 10, y: 3 },
-    ]);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      xAxis: () => { domain: readonly [number, number] };
-      yAxis: () => { domain: readonly [number, number] };
-      effectivePadding: () => {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-      };
-    };
-    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(0);
-    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(10);
-    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(0);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(8);
-    // Default SCATTER_INSET on every side.
-    expect(cast.effectivePadding().top).toBeCloseTo(0.04);
-    expect(cast.effectivePadding().right).toBeCloseTo(0.04);
-    expect(cast.effectivePadding().bottom).toBeCloseTo(0.04);
-    expect(cast.effectivePadding().left).toBeCloseTo(0.04);
+/**
+ * Every dot in a definition's scene.
+ */
+const dots = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 300,
+    height: 200,
   });
+  const found: SceneDot[] = [];
+  const walk = (nodes: readonly SceneNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') {
+        if (!node.focus) walk(node.children);
+      } else if (node.kind === 'dot') found.push(node);
+    }
+  };
+  walk(scene.nodes);
+  return { scene, found };
+};
 
-  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
-    const { componentRef } = await render(UiScatterChart);
-    const inst = componentRef.instance as UiScatterChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 0 },
-      { x: 10, y: 10 },
-    ]);
-    setInputSignal(inst.xMin, -5);
-    setInputSignal(inst.xMax, 20);
-    setInputSignal(inst.yMin, -1);
-    setInputSignal(inst.yMax, 15);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      xAxis: () => { domain: readonly [number, number] };
-      yAxis: () => { domain: readonly [number, number] };
-    };
-    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(-5);
-    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(20);
-    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(-1);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(15);
-  });
+describe('UiScatterChart', () => {
+  type Internals = {
+    definition: () => ChartDefinition<any, any, any>;
+    onSelect(point: ChartPoint | null): void;
+  };
 
-  it('user padding overrides individual sides of the default inset', async () => {
+  it('builds its definition from its inputs', async () => {
     const { componentRef } = await render(UiScatterChart);
-    const inst = componentRef.instance as UiScatterChart;
-    setInputSignal(inst.padding, { top: 0.2 });
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      effectivePadding: () => {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-      };
-    };
-    expect(cast.effectivePadding().top).toBeCloseTo(0.2);
-    expect(cast.effectivePadding().left).toBeCloseTo(0.04);
+    const chart = componentRef.instance as UiScatterChart;
+    setInputSignal(chart.data, data);
+    setInputSignal(chart.radius, 7);
+    const { found } = dots((chart as unknown as Internals).definition());
+    expect(found[0]!.radius).toBe(7);
   });
 
-  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+  it('emits the tapped datum', async () => {
     const { componentRef } = await render(UiScatterChart);
-    const inst = componentRef.instance as UiScatterChart;
-    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
-    expect(inst.yTickFormat()(1.005)).toBe('1');
-  });
-});
-
-describe('UiScatterSeries', () => {
-  const renderSeries = async () => {
-    const parentResult = await render(UiCartesianChart);
-    const parent = parentResult.componentRef.instance as UiCartesianChart;
-    setInputSignal(parent.xDomain, [0, 10]);
-    setInputSignal(parent.yDomain, [0, 10]);
-    await waitForUpdate();
-    const seriesResult = await render(UiScatterSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiScatterSeries;
-    setInputSignal(series.data, [
-      { x: 0, y: 0 },
-      { x: 5, y: 5 },
-      { x: 10, y: 10 },
-    ]);
-    await waitForUpdate();
-    return { parent, series };
-  };
-
-  it('renders a circular dot per datum with the fallback color', async () => {
-    const { series } = await renderSeries();
-    const cast = series as unknown as {
-      dots: () => { style: string; point: { x: number; y: number } }[];
-    };
-    const dots = cast.dots();
-    expect(dots.length).toBe(3);
-    for (const d of dots) {
-      expect(d.style).toContain('background-color: var(--primary)');
-      expect(d.style).toContain('border-radius');
-    }
-  });
-
-  it('cycles through the per-dot palette when colors are provided', async () => {
-    const { series } = await renderSeries();
-    setInputSignal(series.colors, ['#f00', '#0f0']);
-    await waitForUpdate();
-    const cast = series as unknown as { dots: () => { style: string }[] };
-    const dots = cast.dots();
-    expect(dots[0].style).toContain('#f00');
-    expect(dots[1].style).toContain('#0f0');
-    expect(dots[2].style).toContain('#f00');
-  });
-
-  it('per-dot sizes drive per-dot radii for a bubble chart', async () => {
-    const { series } = await renderSeries();
-    setInputSignal(series.sizes, [10, 6]);
-    await waitForUpdate();
-    const cast = series as unknown as { dots: () => { style: string }[] };
-    const dots = cast.dots();
-    // radius 10 → width 20px
-    expect(dots[0].style).toContain('width: 20.00px');
-    // radius 6 → width 12px
-    expect(dots[1].style).toContain('width: 12.00px');
-    // No entry → falls back to uniform radius (default 4) → width 8px
-    expect(dots[2].style).toContain('width: 8.00px');
-  });
-
-  it('emits pointTap with the source point when a dot is tapped', async () => {
-    const { series } = await renderSeries();
-    const cb = vi.fn();
-    series.pointTap.subscribe(cb);
-    (
-      series as unknown as { onPointTap: (p: { x: number; y: number }) => void }
-    ).onPointTap({ x: 3, y: 4 });
-    expect(cb).toHaveBeenCalledWith({ x: 3, y: 4 });
+    const chart = componentRef.instance as UiScatterChart;
+    const tapped = vi.fn();
+    chart.pointTap.subscribe(tapped);
+    const internals = chart as unknown as Internals;
+    internals.onSelect({ datum: data[2] } as ChartPoint);
+    internals.onSelect(null);
+    expect(tapped.mock.calls).toEqual([[data[2]]]);
   });
 });