fix(ui): stop live counts from flooding screen readers

app/src/__tests__/cd-recording-status.test.ts

@@ -0,0 +1,113 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import type { DevframeRpcClient } from 'devframe/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CdRecording, type CdCycle, type CdPage } from '../pages/cd-recording';
+
+let fixture: ComponentFixture<CdRecording>;
+let rpcCall: ReturnType<typeof vi.fn>;
+
+function cycle(id: number): CdCycle {
+  return { id, at: 1000 + id, ms: 1, passes: 1, checks: 2, components: [] };
+}
+
+function page(recording: boolean, count: number): CdPage {
+  return {
+    pageId: 'p1',
+    supported: true,
+    recording,
+    startedAt: recording ? 1000 : null,
+    dropped: 0,
+    cycles: Array.from({ length: count }, (_, i) => cycle(i + 1)),
+    components: [],
+    hosts: {},
+  };
+}
+
+const host = () => fixture.nativeElement as HTMLElement;
+const live = () => host().querySelector('[role="status"]')!.textContent!;
+const visible = () => host().querySelector('.status')!.textContent!.trim();
+const button = (text: string) =>
+  [...host().querySelectorAll('button')].find((b) => b.textContent?.trim() === text)!;
+
+async function show(recording: boolean, count: number) {
+  fixture.componentRef.setInput('page', page(recording, count));
+  await fixture.whenStable();
+}
+
+async function click(text: string) {
+  button(text).click();
+  await fixture.whenStable();
+  await new Promise((resolve) => setTimeout(resolve));
+  await fixture.whenStable();
+}
+
+describe('CdRecording status', () => {
+  beforeEach(async () => {
+    rpcCall = vi.fn(() => Promise.resolve({ ok: true }));
+    const client = { scope: () => ({ rpc: { call: rpcCall } }) };
+    fixture = TestBed.createComponent(CdRecording);
+    fixture.componentRef.setInput('pageId', 'p1');
+    fixture.componentRef.setInput('rpc', client as unknown as DevframeRpcClient);
+    await show(false, 0);
+  });
+
+  afterEach(() => {
+    fixture?.destroy();
+    TestBed.resetTestingModule();
+  });
+
+  it('keeps the cycle count visible but out of the live region', async () => {
+    await show(true, 1);
+    const before = live();
+    expect(visible()).toBe('Recording. 1 cycle so far.');
+    expect(host().querySelector('.status')!.closest('[role="status"], [aria-live]')).toBeNull();
+
+    await show(true, 2);
+    await show(true, 30);
+    expect(visible()).toBe('Recording. 30 cycles so far.');
+    expect(live()).toBe(before);
+  });
+
+  it('announces Record, Stop with the total, and Clear', async () => {
+    await click('Record');
+    expect(rpcCall).toHaveBeenLastCalledWith('request-change-detection-record', {
+      pageId: 'p1',
+      on: true,
+    });
+    expect(live()).toBe('Recording started.');
+
+    await show(true, 3);
+    expect(live()).toBe('Recording started.');
+
+    await click('Stop recording');
+    expect(live()).toBe('Recording stopped. 3 cycles recorded.');
+
+    await show(false, 3);
+    await click('Clear');
+    expect(live()).toBe('Cleared the recorded cycles.');
+  });
+
+  it('announces a repeated message again', async () => {
+    await show(false, 2);
+    await click('Clear');
+    const first = live();
+    await click('Clear');
+    expect(live()).not.toBe(first);
+    expect(live().trim()).toBe('Cleared the recorded cycles.');
+  });
+
+  it('announces when the page cannot be reached', async () => {
+    rpcCall.mockImplementation(() => Promise.reject(new Error('offline')));
+    await click('Record');
+    expect(live()).toBe('Could not reach the page.');
+    expect(visible()).toBe('Could not reach the page.');
+  });
+
+  it('reports a failure, not success, when there is no connection to clear through', async () => {
+    fixture.componentRef.setInput('rpc', null);
+    await show(false, 3);
+    await click('Clear');
+    expect(live()).toBe('Could not reach the page.');
+    expect(live()).not.toContain('Cleared');
+  });
+});

app/src/__tests__/network-timeline-filter.test.ts

@@ -151,6 +151,37 @@ describe('NetworkInspector timeline filters', () => {
     expect(host().querySelector('tr.selected button')?.getAttribute('data-call-id')).toBe('c1');
   });
 
+  it('announces the count when a filter changes, not when calls arrive', async () => {
+    const status = () => host().querySelector('.filters [role="status"]')!.textContent!.trim();
+    expect(host().querySelector('.filters .total')!.closest('[aria-live], [role="status"]')).toBe(
+      null,
+    );
+
+    await type('products');
+    expect(status()).toBe('2 of 6');
+
+    fixture.componentInstance.serverCalls.update((calls) => [
+      ...calls,
+      call({ id: 's3', side: 'server', url: 'http://localhost/api/products/2', at: 1007 }),
+    ]);
+    await fixture.whenStable();
+    expect(total()).toBe('3 of 7');
+    expect(status()).toBe('2 of 6');
+
+    await type('');
+    expect(status()).toBe('7 of 7');
+  });
+
+  it('announces a filter change again when the counts stay the same', async () => {
+    const raw = () => host().querySelector('.filters [role="status"]')!.textContent!;
+    await type('products');
+    const first = raw();
+    expect(first.trim()).toBe('2 of 6');
+    await type('product');
+    expect(raw().trim()).toBe('2 of 6');
+    expect(raw()).not.toBe(first);
+  });
+
   it('keeps the empty state when there are no calls at all', async () => {
     fixture.componentInstance.serverCalls.set([]);
     fixture.componentInstance.pages.set([]);

app/src/pages/cd-recording.ts

@@ -55,7 +55,8 @@ const SHOWN_CYCLES = 30;
         @if (cycles().length) {
           <button type="button" (click)="clear()">Clear</button>
         }
-        <p class="status" role="status">{{ status() }}</p>
+        <p class="status">{{ status() }}</p>
+        <p class="sr-only" role="status">{{ announcement() }}</p>
       </div>
       <p class="hint">
         Records each change detection cycle with Angular's profiler: how long it took, how many
@@ -266,6 +267,12 @@ export class CdRecording {
   readonly rpc = input<DevframeRpcClient | null>(null);
 
   protected readonly message = signal('');
+  /**
+   * What a screen reader hears. It changes only when Record, Stop or Clear finishes or fails.
+   * The visible status also counts cycles as they arrive, which would make a screen reader talk
+   * many times a second while the app is used, so it sits outside any live region.
+   */
+  protected readonly announcement = signal('');
   readonly recording = computed(() => this.page()?.recording === true);
   readonly cycles = computed(() => this.page()?.cycles ?? []);
   readonly maxCycles = computed(() => panelConfig(this.rpc()).limits.cdCycles);
@@ -289,23 +296,43 @@ export class CdRecording {
   }
 
   async toggle() {
-    await this.send({ on: !this.recording() }, this.recording() ? '' : 'Starting…');
+    if (this.recording()) {
+      await this.send({ on: false }, '', () => {
+        const count = this.cycles().length;
+        return `Recording stopped. ${count} ${count === 1 ? 'cycle' : 'cycles'} recorded.`;
+      });
+    } else {
+      await this.send({ on: true }, 'Starting…', () => 'Recording started.');
+    }
   }
 
   async clear() {
-    await this.send({ clear: true }, '');
+    await this.send({ clear: true }, '', () => 'Cleared the recorded cycles.');
   }
 
-  private async send(request: { on?: boolean; clear?: boolean }, pending: string) {
+  private async send(
+    request: { on?: boolean; clear?: boolean },
+    pending: string,
+    done: () => string,
+  ) {
     this.message.set(pending);
     try {
+      if (!this.rpc()) throw new Error('no client');
       await call(this.rpc(), 'request-change-detection-record', {
         pageId: this.pageId(),
         ...request,
       });
       this.message.set('');
+      this.announce(done());
     } catch {
-      this.message.set('Could not reach the page.');
+      const failed = 'Could not reach the page.';
+      this.message.set(failed);
+      this.announce(failed);
     }
   }
+
+  /** Sets the live message, changing it slightly when it repeats so screen readers say it again. */
+  private announce(message: string) {
+    this.announcement.update((current) => (current === message ? `${message} ` : message));
+  }
 }

app/src/pages/network-inspector.ts

@@ -10,6 +10,7 @@ import {
   input,
   linkedSignal,
   signal,
+  untracked,
 } from '@angular/core';
 import { JsonPipe } from '@angular/common';
 import type { DevframeRpcClient } from 'devframe/client';
@@ -566,9 +567,8 @@ const HTTP_STATUS_OPTIONS: SelectOption[] = [
             />
             Failed only
           </label>
-          <span class="total" aria-live="polite"
-            >{{ visibleCalls().length }} of {{ timeline().length }}</span
-          >
+          <span class="total">{{ visibleCalls().length }} of {{ timeline().length }}</span>
+          <span class="sr-only" role="status">{{ filterStatus() }}</span>
         </div>
         @if (visibleCalls().length) {
           <div class="table-wrap">
@@ -2157,6 +2157,22 @@ export class NetworkInspector {
     );
   });
 
+  /**
+   * The count, announced only when a filter changes. The visible count also changes with every
+   * call the app makes, which would make a screen reader talk while the user uses the app.
+   */
+  readonly filterStatus = computed(() => {
+    this.callQuery();
+    this.sideFilter();
+    this.failedOnly();
+    // A filter change that keeps the same counts still gets announced: the text flips a
+    // trailing no-break space so the live region sees a change.
+    this.filterFlip = !this.filterFlip;
+    const text = untracked(() => `${this.visibleCalls().length} of ${this.timeline().length}`);
+    return this.filterFlip ? `${text}\u00a0` : text;
+  });
+  private filterFlip = true;
+
   /** Follows the visible rows, so the preview hides while filters hide its call. */
   readonly selectedCall = computed(
     () => this.visibleCalls().find((c) => c.id === this.selectedCallId()) ?? null,