feat(frontend): enhance history logging by splitting multiline output into separate entries (screenreader)

Author: mystiker

frontend/src/app/core/mud/components/mud-client/mud-client.component.scss

@@ -10,6 +10,7 @@
     min-height: 0;
     overflow: hidden;
     z-index: 1;
+    padding-left: 8px;
   }
 
   .sr-announcer {

frontend/src/app/features/terminal/mud-screenreader.spec.ts

@@ -70,3 +70,104 @@ describe('MudScreenReaderAnnouncer', () => {
     expect(liveRegion.textContent).toBe('');
   });
 });
+
+describe('MudScreenReaderAnnouncer - appendToHistory', () => {
+  let historyRegion: HTMLElement;
+  let announcer: MudScreenReaderAnnouncer;
+
+  beforeEach(() => {
+    historyRegion = document.createElement('div');
+    announcer = new MudScreenReaderAnnouncer(
+      document.createElement('div'),
+      historyRegion,
+    );
+  });
+
+  afterEach(() => {
+    announcer.dispose();
+  });
+
+  it('splits multiline output into separate log items', () => {
+    announcer.appendToHistory('Line 1\nLine 2\nLine 3');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items.length).toBe(3);
+    expect(items[0].textContent).toBe('Line 1');
+    expect(items[1].textContent).toBe('Line 2');
+    expect(items[2].textContent).toBe('Line 3');
+  });
+
+  it('skips empty lines', () => {
+    announcer.appendToHistory('Line 1\n\nLine 3\n');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items.length).toBe(2);
+    expect(items[0].textContent).toBe('Line 1');
+    expect(items[1].textContent).toBe('Line 3');
+  });
+
+  it('skips lines with only whitespace', () => {
+    announcer.appendToHistory('Line 1\n   \n\t\nLine 4');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items.length).toBe(2);
+    expect(items[0].textContent).toBe('Line 1');
+    expect(items[1].textContent).toBe('Line 4');
+  });
+
+  it('handles CRLF line endings correctly', () => {
+    announcer.appendToHistory('Line 1\r\nLine 2\r\nLine 3');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items.length).toBe(3);
+    expect(items[0].textContent).toBe('Line 1');
+    expect(items[1].textContent).toBe('Line 2');
+    expect(items[2].textContent).toBe('Line 3');
+  });
+
+  it('strips ANSI escape sequences from each line', () => {
+    announcer.appendToHistory(
+      'Line 1 \x1b[31mRed\x1b[0m\nLine 2 \x1b[32mGreen\x1b[0m',
+    );
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items.length).toBe(2);
+    expect(items[0].textContent).toBe('Line 1 Red');
+    expect(items[1].textContent).toBe('Line 2 Green');
+  });
+
+  it('sets role="text" on each log item', () => {
+    announcer.appendToHistory('Line 1\nLine 2');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items[0].getAttribute('role')).toBe('text');
+    expect(items[1].getAttribute('role')).toBe('text');
+  });
+
+  it('ignores empty normalized output', () => {
+    announcer.appendToHistory('\x1b[31m\x1b[0m\r\n\x1b[32m\x1b[0m');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    expect(items.length).toBe(0);
+  });
+
+  it('does nothing when history region is not provided', () => {
+    const announcer2 = new MudScreenReaderAnnouncer(
+      document.createElement('div'),
+      undefined, // no history region
+    );
+
+    // Should not throw
+    announcer2.appendToHistory('Line 1\nLine 2');
+  });
+
+  it('collapses excessive blank lines before splitting', () => {
+    announcer.appendToHistory('Line 1\n\n\n\nLine 5');
+
+    const items = historyRegion.querySelectorAll('p.sr-log-item');
+    // Should be 3 items: 'Line 1', '', 'Line 5' -> after filtering empty: 2 items
+    expect(items.length).toBe(2);
+    expect(items[0].textContent).toBe('Line 1');
+    expect(items[1].textContent).toBe('Line 5');
+  });
+});

frontend/src/app/features/terminal/mud-screenreader.ts

@@ -90,6 +90,8 @@ export class MudScreenReaderAnnouncer {
 
   /**
    * Appends sanitized text to the history region so users can navigate it later.
+   * Splits text by newlines to create separate entries for each line, allowing screen readers
+   * to announce each line individually rather than reading the entire block as one.
    */
   public appendToHistory(raw: string): void {
     if (!this.historyRegion) {
@@ -102,13 +104,21 @@ export class MudScreenReaderAnnouncer {
     }
 
     const doc = this.historyRegion.ownerDocument;
+    const lines = normalized.split('\n');
 
-    const item = doc.createElement('p');
-    item.className = 'sr-log-item';
-    item.textContent = normalized;
-    item.role = 'text';
+    for (const line of lines) {
+      // Skip empty lines to avoid cluttering the history
+      if (!line.trim()) {
+        continue;
+      }
+
+      const item = doc.createElement('p');
+      item.className = 'sr-log-item';
+      item.textContent = line;
+      item.setAttribute('role', 'text');
 
-    this.historyRegion.appendChild(item);
+      this.historyRegion.appendChild(item);
+    }
   }
 
   /**