Prototype improved a11y buffer view

css/xterm.css

@@ -150,6 +150,24 @@
     color: transparent;
 }
 
+.xterm .xterm-accessibility-full-output {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: .5em;
+    background: #000;
+    color: #fff;
+    opacity: 0;
+    overflow: scroll;
+    overflow-x: hidden;
+}
+.xterm .xterm-accessibility-full-output:focus {
+    opacity: 1;
+    z-index: 20;
+}
+
 .xterm .live-region {
     position: absolute;
     left: -9999px;

src/browser/AccessibilityManager.ts

@@ -4,14 +4,16 @@
  */
 
 import * as Strings from 'browser/LocalizableStrings';
-import { ITerminal, IRenderDebouncer } from 'browser/Types';
+import { ITerminal, IRenderDebouncer, ReadonlyColorSet } from 'browser/Types';
 import { IBuffer } from 'common/buffer/Types';
 import { isMac } from 'common/Platform';
 import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
-import { IRenderService } from 'browser/services/Services';
+import { IRenderService, IThemeService } from 'browser/services/Services';
+import { IOptionsService } from 'common/services/Services';
+import { ITerminalOptions } from 'xterm';
 
 const MAX_ROWS_TO_READ = 20;
 
@@ -26,6 +28,7 @@ export class AccessibilityManager extends Disposable {
   private _rowElements: HTMLElement[];
   private _liveRegion: HTMLElement;
   private _liveRegionLineCount: number = 0;
+  private _fullOutputElement: HTMLElement;
 
   private _renderRowsDebouncer: IRenderDebouncer;
   private _screenDprMonitor: ScreenDprMonitor;
@@ -48,12 +51,14 @@ export class AccessibilityManager extends Disposable {
 
   constructor(
     private readonly _terminal: ITerminal,
-    private readonly _renderService: IRenderService
+    @IOptionsService optionsService: IOptionsService,
+    @IRenderService private readonly _renderService: IRenderService,
+    @IThemeService themeService: IThemeService
   ) {
     super();
     this._accessibilityTreeRoot = document.createElement('div');
     this._accessibilityTreeRoot.classList.add('xterm-accessibility');
-    this._accessibilityTreeRoot.tabIndex = 0;
+    // this._accessibilityTreeRoot.tabIndex = 0;
 
     this._rowContainer = document.createElement('div');
     this._rowContainer.setAttribute('role', 'list');
@@ -83,7 +88,18 @@ export class AccessibilityManager extends Disposable {
     if (!this._terminal.element) {
       throw new Error('Cannot enable accessibility before Terminal.open');
     }
-    this._terminal.element.insertAdjacentElement('afterbegin', this._accessibilityTreeRoot);
+
+    const contentEditable = optionsService.options.accessibilityElementContentEditable;
+    this._fullOutputElement = document.createElement(contentEditable ? 'section' : 'div');
+    this._fullOutputElement.contentEditable = contentEditable ? 'true' : 'false';
+
+    // TODO: Add to strings
+    this._fullOutputElement.ariaLabel = 'Terminal buffer';
+    this._fullOutputElement.contentEditable = 'true';
+    this._fullOutputElement.spellcheck = false;
+    this._fullOutputElement.classList.add('xterm-accessibility-full-output');
+    this._fullOutputElement.addEventListener('focus', () => this._refreshFullOutput());
+    this._terminal.element.insertAdjacentElement('afterbegin', this._fullOutputElement);
 
     this.register(this._renderRowsDebouncer);
     this.register(this._terminal.onResize(e => this._handleResize(e.rows)));
@@ -97,6 +113,11 @@ export class AccessibilityManager extends Disposable {
     this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
     this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
 
+    this._handleColorChange(themeService.colors);
+    this.register(themeService.onChangeColors(e => this._handleColorChange(e)));
+    this._handleFontOptionChange(optionsService.options);
+    this.register(optionsService.onMultipleOptionChange(['fontSize', 'fontFamily'], () => this._handleFontOptionChange(optionsService.options)));
+
     this._screenDprMonitor = new ScreenDprMonitor(window);
     this.register(this._screenDprMonitor);
     this._screenDprMonitor.setListener(() => this._refreshRowsDimensions());
@@ -299,4 +320,41 @@ export class AccessibilityManager extends Disposable {
     this._liveRegion.textContent += this._charsToAnnounce;
     this._charsToAnnounce = '';
   }
+
+
+  private _refreshFullOutput(): void {
+    // Cap the number of items in full output, without this screen reader can easily lock up for 20+
+    // seconds, probably due to refreshing their a11y tree
+    const start = Math.max(this._terminal.buffer.lines.length - 100, 0);
+    if (!this._terminal.viewport) {
+      return;
+    }
+    const { bufferElements, cursorElement } = this._terminal.viewport.getBufferElements(start);
+    for (const element of bufferElements) {
+      if (element.textContent) {
+        element.textContent = element.textContent.replace(new RegExp(' ', 'g'), '\xA0');
+      }
+    }
+    this._fullOutputElement.replaceChildren(...bufferElements);
+    const s = document.getSelection();
+    if (s && cursorElement) {
+      s.removeAllRanges();
+      const r = document.createRange();
+      r.selectNode(bufferElements[bufferElements.length - 1]);
+      r.setStart(cursorElement, 0);
+      r.setEnd(cursorElement, 0);
+      s.addRange(r);
+    }
+    this._fullOutputElement.scrollTop = this._fullOutputElement.scrollHeight;
+  }
+
+  private _handleColorChange(colorSet: ReadonlyColorSet): void {
+    this._fullOutputElement.style.backgroundColor = colorSet.background.css;
+    this._fullOutputElement.style.color = colorSet.foreground.css;
+  }
+
+  private _handleFontOptionChange(options: Required<ITerminalOptions>): void {
+    this._fullOutputElement.style.fontFamily = options.fontFamily;
+    this._fullOutputElement.style.fontSize = `${options.fontSize}px`;
+  }
 }

src/browser/Terminal.ts

@@ -267,7 +267,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _handleScreenReaderModeOptionChange(value: boolean): void {
     if (value) {
       if (!this._accessibilityManager && this._renderService) {
-        this._accessibilityManager = new AccessibilityManager(this, this._renderService);
+        this._accessibilityManager = this._instantiationService.createInstance(AccessibilityManager, this);
       }
     } else {
       this._accessibilityManager?.dispose();
@@ -419,7 +419,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.element.dir = 'ltr';   // xterm.css assumes LTR
     this.element.classList.add('terminal');
     this.element.classList.add('xterm');
-    this.element.setAttribute('tabindex', '0');
     parent.appendChild(this.element);
 
     // Performance: Use a document fragment to build the terminal
@@ -553,7 +552,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     if (this.options.screenReaderMode) {
       // Note that this must be done *after* the renderer is created in order to
       // ensure the correct order of the dprchange event
-      this._accessibilityManager = new AccessibilityManager(this, this._renderService);
+      this._accessibilityManager = this._instantiationService.createInstance(AccessibilityManager, this);
     }
     this.register(this.optionsService.onSpecificOptionChange('screenReaderMode', e => this._handleScreenReaderModeOptionChange(e)));
 

src/browser/TestUtils.test.ts

@@ -140,6 +140,9 @@ export class MockTerminal implements ITerminal {
   public write(data: string): void {
     throw new Error('Method not implemented.');
   }
+  public getBufferElements(startLine: number, endLine?: number | undefined): { bufferElements: HTMLElement[]; cursorElement?: HTMLElement | undefined; } {
+    throw new Error('Method not implemented.');
+  }
   public bracketedPasteMode!: boolean;
   public renderer!: IRenderer;
   public linkifier2!: ILinkifier2;
@@ -310,6 +313,9 @@ export class MockViewport implements IViewport {
   public getLinesScrolled(ev: WheelEvent): number {
     throw new Error('Method not implemented.');
   }
+  public getBufferElements(startLine: number, endLine?: number | undefined): { bufferElements: HTMLElement[]; cursorElement?: HTMLElement | undefined; } {
+    throw new Error('Method not implemented.');
+  }
 }
 
 export class MockCompositionHelper implements ICompositionHelper {

src/browser/Types.d.ts

@@ -144,6 +144,7 @@ export interface IViewport extends IDisposable {
   scrollBarWidth: number;
   syncScrollArea(immediate?: boolean): void;
   getLinesScrolled(ev: WheelEvent): number;
+  getBufferElements(startLine: number, endLine?: number): { bufferElements: HTMLElement[]; cursorElement?: HTMLElement };
   handleWheel(ev: WheelEvent): boolean;
   handleTouchStart(ev: TouchEvent): void;
   handleTouchMove(ev: TouchEvent): boolean;

src/browser/Viewport.ts

@@ -279,6 +279,33 @@ export class Viewport extends Disposable implements IViewport {
     return amount;
   }
 
+
+  public getBufferElements(startLine: number, endLine?: number): { bufferElements: HTMLElement[]; cursorElement?: HTMLElement } {
+    let currentLine: string = '';
+    let cursorElement: HTMLElement | undefined;
+    const bufferElements: HTMLElement[] = [];
+    const end = endLine ?? this._bufferService.buffer.lines.length;
+    const lines = this._bufferService.buffer.lines;
+    for (let i = startLine; i < end; i++) {
+      const line = lines.get(i);
+      if (!line) {
+        continue;
+      }
+      const isWrapped = lines.get(i + 1)?.isWrapped;
+      currentLine += line.translateToString(!isWrapped);
+      if (!isWrapped || i === lines.length - 1) {
+        const div = document.createElement('div');
+        div.textContent = currentLine;
+        bufferElements.push(div);
+        if (currentLine.length > 0) {
+          cursorElement = div;
+        }
+        currentLine = '';
+      }
+    }
+    return { bufferElements, cursorElement };
+  }
+
   /**
    * Gets the number of pixels scrolled by the mouse event taking into account what type of delta
    * is being used.

src/common/services/OptionsService.ts

@@ -48,7 +48,8 @@ export const DEFAULT_OPTIONS: Readonly<Required<ITerminalOptions>> = {
   convertEol: false,
   termName: 'xterm',
   cancelEvents: false,
-  overviewRulerWidth: 0
+  overviewRulerWidth: 0,
+  accessibilityElementContentEditable: false
 };
 
 const FONT_WEIGHT_OPTIONS: Extract<FontWeight, string>[] = ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'];

src/common/services/Services.ts

@@ -257,6 +257,7 @@ export interface ITerminalOptions {
   [key: string]: any;
   cancelEvents: boolean;
   termName: string;
+  accessibilityElementContentEditable?: boolean;
 }
 
 export interface ITheme {

typings/xterm.d.ts

@@ -258,6 +258,11 @@ declare module 'xterm' {
      * ruler will be hidden when not set.
      */
     overviewRulerWidth?: number;
+
+    /**
+     * If the accessibility element is created, whether it should be content editable
+     */
+    accessibilityElementContentEditable?: boolean;
   }
 
   /**
@@ -1160,32 +1165,32 @@ declare module 'xterm' {
      * @param text The text of the link.
      * @param range The buffer range of the link.
      */
-     activate(event: MouseEvent, text: string, range: IBufferRange): void;
-
-     /**
-      * Called when the mouse hovers the link. To use this to create a DOM-based hover tooltip,
-      * create the hover element within `Terminal.element` and add the `xterm-hover` class to it,
-      * that will cause mouse events to not fall through and activate other links.
-      * @param event The mouse event triggering the callback.
-      * @param text The text of the link.
-      * @param range The buffer range of the link.
-      */
-     hover?(event: MouseEvent, text: string, range: IBufferRange): void;
-
-     /**
-      * Called when the mouse leaves the link.
-      * @param event The mouse event triggering the callback.
-      * @param text The text of the link.
-      * @param range The buffer range of the link.
-      */
-     leave?(event: MouseEvent, text: string, range: IBufferRange): void;
-
-     /**
-      * Whether to receive non-HTTP URLs from LinkProvider. When false, any usage of non-HTTP URLs
-      * will be ignored. Enabling this option without proper protection in `activate` function
-      * may cause security issues such as XSS.
-      */
-     allowNonHttpProtocols?: boolean;
+    activate(event: MouseEvent, text: string, range: IBufferRange): void;
+
+    /**
+     * Called when the mouse hovers the link. To use this to create a DOM-based hover tooltip,
+     * create the hover element within `Terminal.element` and add the `xterm-hover` class to it,
+     * that will cause mouse events to not fall through and activate other links.
+     * @param event The mouse event triggering the callback.
+     * @param text The text of the link.
+     * @param range The buffer range of the link.
+     */
+    hover?(event: MouseEvent, text: string, range: IBufferRange): void;
+
+    /**
+     * Called when the mouse leaves the link.
+     * @param event The mouse event triggering the callback.
+     * @param text The text of the link.
+     * @param range The buffer range of the link.
+     */
+    leave?(event: MouseEvent, text: string, range: IBufferRange): void;
+
+    /**
+     * Whether to receive non-HTTP URLs from LinkProvider. When false, any usage of non-HTTP URLs
+     * will be ignored. Enabling this option without proper protection in `activate` function
+     * may cause security issues such as XSS.
+     */
+    allowNonHttpProtocols?: boolean;
   }
 
   /**