@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/alert-dialog/alert-dialog.test.ts

@@ -1,8 +1,24 @@
-import { Component, signal } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal, viewChild } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import { DURATION } from '../../utils/animate';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import {
   UiAlertDialog,
   UiAlertDialogDescription,
@@ -12,7 +28,6 @@ import {
 } from './alert-dialog';
 
 @Component({
-  standalone: true,
   imports: [
     UiAlertDialog,
     UiAlertDialogHeader,
@@ -22,120 +37,219 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-alert-dialog [(open)]="open">
-      <ui-alert-dialog-header>
-        <ui-alert-dialog-title>Sure?</ui-alert-dialog-title>
-        <ui-alert-dialog-description>Cannot undo</ui-alert-dialog-description>
-      </ui-alert-dialog-header>
-      <ui-alert-dialog-footer><text>Buttons</text></ui-alert-dialog-footer>
-    </ui-alert-dialog>
+    @if (shown()) {
+      <ui-alert-dialog
+        [(open)]="open"
+        class="max-w-sm"
+        (closed)="closes.set(closes() + 1)"
+      >
+        <ui-alert-dialog-header class="gap-2">
+          <ui-alert-dialog-title class="text-xl">Sure?</ui-alert-dialog-title>
+          <ui-alert-dialog-description class="italic">
+            Cannot undo
+          </ui-alert-dialog-description>
+        </ui-alert-dialog-header>
+        <ui-alert-dialog-footer class="justify-start">
+          <text>Buttons</text>
+        </ui-alert-dialog-footer>
+      </ui-alert-dialog>
+    }
   `,
 })
 class AlertDialogHost {
-  open = true;
+  readonly open = signal(false);
+  // Takes the alert dialog out of the tree, as an `@if` or a route change
+  // would.
+  readonly shown = signal(true);
+  readonly closes = signal(0);
+  readonly dialog = viewChild.required(UiAlertDialog);
 }
 
+const renderAlertDialog = async () => {
+  const result = await render(AlertDialogHost);
+  const panel = () =>
+    result.container.querySelector('[accessibility-exclusive-focus]')!;
+  return {
+    ...result,
+    host: result.componentRef.instance as AlertDialogHost,
+    overlay: () => result.container.querySelector('overlay')!,
+    panel,
+    backdrop: () => panel().parentElement!,
+  };
+};
+
+/**
+ * Waits for the alert dialog's open or close sequence, which runs on timers, then
+ * renders what it changed.
+ */
+const after = async (ms: number) => {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+  await waitForUpdate();
+};
+
+/**
+ * Long enough for the open sequence, including the panel's 30ms stagger. The
+ * sequence is chained timers, and on Windows each can fire up to a clock
+ * tick (about 16ms) late, so 50ms was too short on CI's Windows runner.
+ */
+const OPENED = 150;
+/** Long enough for the close animation and the hide after it, as above. */
+const CLOSED = DURATION.normal + 150;
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling an animation. */
+const CANCEL = 3;
+
 describe('UiAlertDialog', () => {
-  it('renders header, title, description, and footer', async () => {
-    const { getByText } = await render(AlertDialogHost);
+  // Watched per test: the testing library resets the main thread after each.
+  let animate: MockInstance<LynxMainThread['__ElementAnimate']>;
+  beforeEach(() => {
+    animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+  });
+  afterEach(() => animate.mockRestore());
+
+  it('renders each part with its projected content', async () => {
+    const { getByText } = await renderAlertDialog();
     expect(getByText('Sure?')).toBeTruthy();
     expect(getByText('Cannot undo')).toBeTruthy();
     expect(getByText('Buttons')).toBeTruthy();
   });
 
-  it('panel tap is a no-op (catchtap stops bubbling)', async () => {
-    const { componentRef } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    expect(() =>
-      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
-    ).not.toThrow();
+  it("merges each part's class with its own, the given class winning", async () => {
+    const { container, getByText, panel } = await renderAlertDialog();
+    expect(panel().classList).toContain('bg-background');
+    expect(panel().classList).toContain('max-w-sm');
+    expect(getByText('Sure?').classList).toContain('font-semibold');
+    expect(getByText('Sure?').classList).toContain('text-xl');
+    expect(getByText('Cannot undo').classList).toContain('text-sm');
+    expect(getByText('Cannot undo').classList).toContain('italic');
+    // Each part's own view, not its host element, which keeps the bare class.
+    const header = container.querySelector('.flex-col.gap-2');
+    expect(header?.classList).not.toContain('gap-1.5');
+    const footer = container.querySelector('.pt-4');
+    expect(footer?.classList).toContain('justify-start');
+    expect(footer?.classList).not.toContain('justify-end');
   });
 
-  it('open effect: showing then hiding runs the animate-in/out lifecycles', async () => {
-    // Monkey-patch backdrop/panel refs so #animateIn / #animateOut execute in
-    // full instead of bailing on !backdrop || !panel.
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    const view = container.querySelector('view') as Element;
-    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
-      nativeElement: view,
-    });
-    (inst as unknown as { panelRef: unknown }).panelRef = signal({
-      nativeElement: view,
-    });
-
-    inst.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    await waitForUpdate();
-
-    inst.open.set(false);
-    await new Promise((r) => setTimeout(r, 320));
-    await waitForUpdate();
-    expect(inst.open()).toBe(false);
+  it('stays hidden until it is opened', async () => {
+    const { host, overlay, panel } = await renderAlertDialog();
+    await after(CLOSED);
+    expect(overlay().getAttribute('style')).toContain('display: none');
+    expect(panel().getAttribute('accessibility-exclusive-focus')).toBe('false');
+    expect(animate).not.toHaveBeenCalled();
+    // Starting closed isn't closing: `closed` waits for a real close.
+    expect(host.closes()).toBe(0);
   });
 
-  it('open effect bails when backdrop/panel refs are undefined', async () => {
-    // Covers the early-return branches in #animateIn / #animateOut.
-    const { componentRef } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    inst.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    inst.open.set(false);
-    await waitForUpdate();
-    expect(inst.open()).toBe(false);
+  it('shows the overlay and animates the backdrop, then the panel, in', async () => {
+    const { host, overlay, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    expect(overlay().getAttribute('style')).not.toContain('display: none');
+    expect(animate).toHaveBeenCalledWith(backdrop(), [
+      START,
+      expect.any(String),
+      [{ opacity: 0 }, { opacity: 1 }],
+      expect.objectContaining({ duration: DURATION.normal }),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(0.9) translateY(10px)', opacity: 0 },
+        { transform: 'scale(1) translateY(0px)', opacity: 1 },
+      ],
+      expect.objectContaining({ duration: DURATION.slow }),
+    ]);
   });
 
-  it('overlayStyle switches between visible and hidden variants', async () => {
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    let overlay = container.querySelector('overlay');
-    expect(overlay?.getAttribute('style')).toContain('display: none');
-
-    const view = container.querySelector('view') as Element;
-    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
-      nativeElement: view,
-    });
-    (inst as unknown as { panelRef: unknown }).panelRef = signal({
-      nativeElement: view,
-    });
-    inst.open.set(true);
-    for (let i = 0; i < 10; i++) await waitForUpdate();
-    overlay = container.querySelector('overlay');
-    expect(overlay?.getAttribute('style')).not.toContain('display: none');
+  it('moves a screen reader into the panel and keeps it there while open', async () => {
+    const { host, panel } = await renderAlertDialog();
+    const invoke = vi.spyOn(host.dialog().panelRef().nativeElement, 'invoke');
+    host.open.set(true);
+    await after(OPENED);
+    expect(invoke).toHaveBeenCalledWith('requestAccessibilityFocus');
+    expect(panel().getAttribute('accessibility-exclusive-focus')).toBe('true');
   });
 
-  it('accepts a user class on the panel', async () => {
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    setInputSignal(inst.userClass, 'custom-panel');
-    await waitForUpdate();
-    const views = Array.from(container.querySelectorAll('view'));
-    expect(
-      views.some((el) => el.getAttribute('class')?.includes('custom-panel')),
-    ).toBe(true);
-  });
-});
+  it('animates out, then hides and emits closed', async () => {
+    const { host, overlay, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    animate.mockClear();
 
-describe('Alert dialog sub-components', () => {
-  it('UiAlertDialogHeader renders projected content', async () => {
-    const { container } = await render(UiAlertDialogHeader);
-    expect(container.querySelector('view')).toBeTruthy();
+    host.open.set(false);
+    await after(CLOSED);
+    expect(animate).toHaveBeenCalledWith(backdrop(), [
+      START,
+      expect.any(String),
+      [{ opacity: 1 }, { opacity: 0 }],
+      expect.any(Object),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(1) translateY(0px)', opacity: 1 },
+        { transform: 'scale(0.95) translateY(10px)', opacity: 0 },
+      ],
+      expect.any(Object),
+    ]);
+    expect(overlay().getAttribute('style')).toContain('display: none');
+    expect(panel().getAttribute('accessibility-exclusive-focus')).toBe('false');
+    expect(host.closes()).toBe(1);
   });
 
-  it('UiAlertDialogTitle renders projected content', async () => {
-    const { container } = await render(UiAlertDialogTitle);
-    expect(container.querySelector('text')).toBeTruthy();
+  it('cancels the previous animations when it opens again', async () => {
+    const { host, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    host.open.set(false);
+    await after(CLOSED);
+    animate.mockClear();
+
+    host.open.set(true);
+    await after(OPENED);
+    // The close animations hold their last frame (fill: forwards) until
+    // they're canceled, which would hide the panel being opened.
+    expect(animate).toHaveBeenCalledWith(backdrop(), [
+      CANCEL,
+      expect.any(String),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel(), [CANCEL, expect.any(String)]);
   });
 
-  it('UiAlertDialogDescription renders projected content', async () => {
-    const { container } = await render(UiAlertDialogDescription);
-    expect(container.querySelector('text')).toBeTruthy();
+  it('stays open when the backdrop or the panel is tapped', async () => {
+    const { host, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    // Unlike a dialog, an alert dialog waits for an answer from its actions.
+    fireEvent.tap(backdrop());
+    // The panel catches its taps, so they don't reach the backdrop either.
+    fireEvent.tap(panel(), { eventType: 'catchEvent' });
+    await waitForUpdate();
+    expect(host.open()).toBe(true);
   });
 
-  it('UiAlertDialogFooter renders projected content', async () => {
-    const { container } = await render(UiAlertDialogFooter);
-    expect(container.querySelector('view')).toBeTruthy();
+  it('stops its close sequence when it is destroyed while closing', async () => {
+    const warn = vi.spyOn(console, 'warn');
+    const { host } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    host.open.set(false);
+    await after(0);
+    // Destroyed during the close animation. Its close timer
+    // (DURATION.normal + 20) used to fire anyway and emit `closed` from the
+    // destroyed output, which Angular warns about in dev builds.
+    host.shown.set(false);
+    await waitForUpdate();
+    await after(CLOSED);
+    const warnings = warn.mock.calls.map(([message]) => String(message));
+    warn.mockRestore();
+    expect(warnings.filter((message) => message.includes('NG0953'))).toEqual(
+      [],
+    );
+    expect(host.closes()).toBe(0);
   });
 });

package/dist/ui/components/alert-dialog/alert-dialog.ts

@@ -1,5 +1,6 @@
 import {
   type ElementRef,
+  type OnDestroy,
   Component,
   ViewEncapsulation,
   computed,
@@ -26,20 +27,24 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-alert-dialog',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
       <view #backdrop [class]="backdropClass()">
-        <view #panel [class]="panelClass()" (catchtap)="onPanelTap()">
+        <view
+          #panel
+          [class]="panelClass()"
+          [accessibility-exclusive-focus]="overlayVisible()"
+          (catchtap)="onPanelTap()"
+        >
           <ng-content />
         </view>
       </view>
     </overlay>
   `,
 })
-export class UiAlertDialog {
+export class UiAlertDialog implements OnDestroy {
   readonly open = model(false);
   readonly userClass = input<string>('', { alias: 'class' });
 
@@ -47,27 +52,38 @@ export class UiAlertDialog {
 
   protected readonly overlayVisible = signal(false);
 
-  readonly backdropRef = viewChild<ElementRef>('backdrop');
-  readonly panelRef = viewChild<ElementRef>('panel');
+  // Required: both are always in the template (the overlay hides with
+  // display:none rather than leaving the tree), and the sequences only read
+  // them from timers that start after the first render.
+  readonly backdropRef = viewChild.required<ElementRef>('backdrop');
+  readonly panelRef = viewChild.required<ElementRef>('panel');
   #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
-    // effect evaluation when `open` starts as false. Without this guard, the
-    // first run would call #doClose() immediately and emit `closed` before the
-    // dialog has ever been opened.
-    effect(() => {
-      const isOpen = this.open();
-      if (isOpen) {
-        this.#hasBeenOpen = true;
-        this.#doOpen();
-      } else if (this.#hasBeenOpen) {
-        this.#doClose();
-      }
-    });
-  }
+  /**
+   * Plays the open or close sequence whenever `open` changes. A field rather
+   * than a constructor: Angular's test build keeps a function for a
+   * constructor that nothing calls, which an app's coverage report would show
+   * as uncovered.
+   *
+   * `#hasBeenOpen` prevents the close animation from running on the initial
+   * effect evaluation when `open` starts as false. Without this guard, the
+   * first run would call #doClose() immediately and emit `closed` before the
+   * dialog has ever been opened.
+   */
+  protected readonly openAndClose = effect(() => {
+    const isOpen = this.open();
+    if (isOpen) {
+      this.#hasBeenOpen = true;
+      this.#doOpen();
+    } else if (this.#hasBeenOpen) {
+      this.#doClose();
+    }
+  });
 
   /**
    * `width`/`height`/`top`/`left` are web-only necessities: on web
@@ -84,9 +100,9 @@ export class UiAlertDialog {
   // `bg-black/50` supplies the dim. It lives on the backdrop specifically so
   // the existing fadeIn/fadeOut (opacity 0↔1, staggered 30ms ahead of the
   // panel scale-in) animate the dim in lockstep with the dialog appearing —
-  // no separate animation needed. A named color with an opacity modifier is
-  // used deliberately: it compiles to `rgb(0 0 0 / 0.5)`, which Lynx accepts,
-  // whereas a semantic token like `bg-background/50` would render transparent.
+  // no separate animation needed. It's a named color, not a theme one,
+  // because the dim is black in light and dark mode alike; it compiles to
+  // `rgb(0 0 0 / 0.5)`, which Lynx accepts.
   protected readonly backdropClass = computed(() =>
     cn('items-center flex justify-center', 'h-full w-full', 'bg-black/50'),
   );
@@ -106,15 +122,37 @@ export class UiAlertDialog {
    */
   protected onPanelTap(): void {}
 
+  /**
+   * The alert dialog 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: make overlay visible first (so native elements exist in
    * the tree), then animate on the next frame. See nav-drawer for the same
    * pattern — Lynx animate() requires elements to be mounted before use.
    */
   #doOpen(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.overlayVisible.set(true);
-      setTimeout(() => this.#animateIn(), 0);
+      this.#later(() => this.#animateIn(), 0);
     }, 0);
   }
 
@@ -123,9 +161,9 @@ export class UiAlertDialog {
    * causing elements to disappear before the animation finishes.
    */
   #doClose(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.#animateOut();
-      setTimeout(() => {
+      this.#later(() => {
         this.overlayVisible.set(false);
         this.closed.emit();
       }, DURATION.normal + 20);
@@ -133,19 +171,23 @@ export class UiAlertDialog {
   }
 
   #animateIn(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
 
     this.#backdropAnim = fadeIn(backdrop, { duration: DURATION.normal });
+    // 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');
 
     // 30ms stagger: let the backdrop fade start first so the panel scale-in
     // feels like it's emerging from behind the dimmed overlay rather than
     // appearing simultaneously with it.
-    setTimeout(() => {
+    this.#later(() => {
       this.#panelAnim = scaleIn(panel, {
         duration: DURATION.slow,
         easing: EASING.springSubtle,
@@ -156,9 +198,8 @@ export class UiAlertDialog {
   }
 
   #animateOut(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
@@ -176,7 +217,6 @@ export class UiAlertDialog {
 
 @Component({
   selector: 'ui-alert-dialog-header',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -195,7 +235,6 @@ export class UiAlertDialogHeader {
 
 @Component({
   selector: 'ui-alert-dialog-title',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `<text [class]="textClass()"><ng-content /></text>`,
@@ -210,7 +249,6 @@ export class UiAlertDialogTitle {
 
 @Component({
   selector: 'ui-alert-dialog-description',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `<text [class]="textClass()"><ng-content /></text>`,
@@ -225,7 +263,6 @@ export class UiAlertDialogDescription {
 
 @Component({
   selector: 'ui-alert-dialog-footer',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `