+++ /dev/null
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import * as Strings from './browser/LocalizableStrings';
-import { ITerminal } from './Types';
-import { IBuffer } from 'common/buffer/Types';
-import { isMac } from 'common/Platform';
-import { RenderDebouncer } from 'browser/RenderDebouncer';
-import { addDisposableDomListener } from 'browser/Lifecycle';
-import { Disposable } from 'common/Lifecycle';
-import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
-import { IRenderService } from 'browser/services/Services';
-
-const MAX_ROWS_TO_READ = 20;
-
-const enum BoundaryPosition {
- TOP,
- BOTTOM
-}
-
-export class AccessibilityManager extends Disposable {
- private _accessibilityTreeRoot: HTMLElement;
- private _rowContainer: HTMLElement;
- private _rowElements: HTMLElement[];
- private _liveRegion: HTMLElement;
- private _liveRegionLineCount: number = 0;
-
- private _renderRowsDebouncer: RenderDebouncer;
- private _screenDprMonitor: ScreenDprMonitor;
-
- private _topBoundaryFocusListener: (e: FocusEvent) => void;
- private _bottomBoundaryFocusListener: (e: FocusEvent) => void;
-
- /**
- * This queue has a character pushed to it for keys that are pressed, if the
- * next character added to the terminal is equal to the key char then it is
- * not announced (added to live region) because it has already been announced
- * by the textarea event (which cannot be canceled). There are some race
- * condition cases if there is typing while data is streaming, but this covers
- * the main case of typing into the prompt and inputting the answer to a
- * question (Y/N, etc.).
- */
- private _charsToConsume: string[] = [];
-
- private _charsToAnnounce: string = '';
-
- constructor(
- private readonly _terminal: ITerminal,
- private readonly _renderService: IRenderService
- ) {
- super();
- this._accessibilityTreeRoot = document.createElement('div');
- this._accessibilityTreeRoot.classList.add('xterm-accessibility');
-
- this._rowContainer = document.createElement('div');
- this._rowContainer.classList.add('xterm-accessibility-tree');
- this._rowElements = [];
- for (let i = 0; i < this._terminal.rows; i++) {
- this._rowElements[i] = this._createAccessibilityTreeNode();
- this._rowContainer.appendChild(this._rowElements[i]);
- }
-
- this._topBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.TOP);
- this._bottomBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.BOTTOM);
- this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
- this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
-
- this._refreshRowsDimensions();
- this._accessibilityTreeRoot.appendChild(this._rowContainer);
-
- this._renderRowsDebouncer = new RenderDebouncer(this._renderRows.bind(this));
- this._refreshRows();
-
- this._liveRegion = document.createElement('div');
- this._liveRegion.classList.add('live-region');
- this._liveRegion.setAttribute('aria-live', 'assertive');
- this._accessibilityTreeRoot.appendChild(this._liveRegion);
-
- this._terminal.element.insertAdjacentElement('afterbegin', this._accessibilityTreeRoot);
-
- this.register(this._renderRowsDebouncer);
- this.register(this._terminal.onResize(e => this._onResize(e.rows)));
- this.register(this._terminal.onRender(e => this._refreshRows(e.start, e.end)));
- this.register(this._terminal.onScroll(() => this._refreshRows()));
- // Line feed is an issue as the prompt won't be read out after a command is run
- this.register(this._terminal.onA11yChar(char => this._onChar(char)));
- this.register(this._terminal.onLineFeed(() => this._onChar('\n')));
- this.register(this._terminal.onA11yTab(spaceCount => this._onTab(spaceCount)));
- this.register(this._terminal.onKey(e => this._onKey(e.key)));
- this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
- this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
-
- this._screenDprMonitor = new ScreenDprMonitor();
- this.register(this._screenDprMonitor);
- this._screenDprMonitor.setListener(() => this._refreshRowsDimensions());
- // This shouldn't be needed on modern browsers but is present in case the
- // media query that drives the ScreenDprMonitor isn't supported
- this.register(addDisposableDomListener(window, 'resize', () => this._refreshRowsDimensions()));
- }
-
- public dispose(): void {
- super.dispose();
- this._terminal.element.removeChild(this._accessibilityTreeRoot);
- this._rowElements.length = 0;
- }
-
- private _onBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
- const boundaryElement = <HTMLElement>e.target;
- const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2];
-
- // Don't scroll if the buffer top has reached the end in that direction
- const posInSet = boundaryElement.getAttribute('aria-posinset');
- const lastRowPos = position === BoundaryPosition.TOP ? '1' : `${this._terminal.buffer.lines.length}`;
- if (posInSet === lastRowPos) {
- return;
- }
-
- // Don't scroll when the last focused item was not the second row (focus is going the other
- // direction)
- if (e.relatedTarget !== beforeBoundaryElement) {
- return;
- }
-
- // Remove old boundary element from array
- let topBoundaryElement: HTMLElement;
- let bottomBoundaryElement: HTMLElement;
- if (position === BoundaryPosition.TOP) {
- topBoundaryElement = boundaryElement;
- bottomBoundaryElement = this._rowElements.pop()!;
- this._rowContainer.removeChild(bottomBoundaryElement);
- } else {
- topBoundaryElement = this._rowElements.shift()!;
- bottomBoundaryElement = boundaryElement;
- this._rowContainer.removeChild(topBoundaryElement);
- }
-
- // Remove listeners from old boundary elements
- topBoundaryElement.removeEventListener('focus', this._topBoundaryFocusListener);
- bottomBoundaryElement.removeEventListener('focus', this._bottomBoundaryFocusListener);
-
- // Add new element to array/DOM
- if (position === BoundaryPosition.TOP) {
- const newElement = this._createAccessibilityTreeNode();
- this._rowElements.unshift(newElement);
- this._rowContainer.insertAdjacentElement('afterbegin', newElement);
- } else {
- const newElement = this._createAccessibilityTreeNode();
- this._rowElements.push(newElement);
- this._rowContainer.appendChild(newElement);
- }
-
- // Add listeners to new boundary elements
- this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
- this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
-
- // Scroll up
- this._terminal.scrollLines(position === BoundaryPosition.TOP ? -1 : 1);
-
- // Focus new boundary before element
- this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2].focus();
-
- // Prevent the standard behavior
- e.preventDefault();
- e.stopImmediatePropagation();
- }
-
- private _onResize(rows: number): void {
- // Remove bottom boundary listener
- this._rowElements[this._rowElements.length - 1].removeEventListener('focus', this._bottomBoundaryFocusListener);
-
- // Grow rows as required
- for (let i = this._rowContainer.children.length; i < this._terminal.rows; i++) {
- this._rowElements[i] = this._createAccessibilityTreeNode();
- this._rowContainer.appendChild(this._rowElements[i]);
- }
- // Shrink rows as required
- while (this._rowElements.length > rows) {
- this._rowContainer.removeChild(this._rowElements.pop()!);
- }
-
- // Add bottom boundary listener
- this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
-
- this._refreshRowsDimensions();
- }
-
- private _createAccessibilityTreeNode(): HTMLElement {
- const element = document.createElement('div');
- element.setAttribute('role', 'listitem');
- element.tabIndex = -1;
- this._refreshRowDimensions(element);
- return element;
- }
-
- private _onTab(spaceCount: number): void {
- for (let i = 0; i < spaceCount; i++) {
- this._onChar(' ');
- }
- }
-
- private _onChar(char: string): void {
- if (this._liveRegionLineCount < MAX_ROWS_TO_READ + 1) {
- if (this._charsToConsume.length > 0) {
- // Have the screen reader ignore the char if it was just input
- const shiftedChar = this._charsToConsume.shift();
- if (shiftedChar !== char) {
- this._charsToAnnounce += char;
- }
- } else {
- this._charsToAnnounce += char;
- }
-
- if (char === '\n') {
- this._liveRegionLineCount++;
- if (this._liveRegionLineCount === MAX_ROWS_TO_READ + 1) {
- this._liveRegion.textContent += Strings.tooMuchOutput;
- }
- }
-
- // Only detach/attach on mac as otherwise messages can go unaccounced
- if (isMac) {
- if (this._liveRegion.textContent && this._liveRegion.textContent.length > 0 && !this._liveRegion.parentNode) {
- setTimeout(() => {
- this._accessibilityTreeRoot.appendChild(this._liveRegion);
- }, 0);
- }
- }
- }
- }
-
- private _clearLiveRegion(): void {
- this._liveRegion.textContent = '';
- this._liveRegionLineCount = 0;
-
- // Only detach/attach on mac as otherwise messages can go unaccounced
- if (isMac) {
- if (this._liveRegion.parentNode) {
- this._accessibilityTreeRoot.removeChild(this._liveRegion);
- }
- }
- }
-
- private _onKey(keyChar: string): void {
- this._clearLiveRegion();
- this._charsToConsume.push(keyChar);
- }
-
- private _refreshRows(start?: number, end?: number): void {
- this._renderRowsDebouncer.refresh(start, end, this._terminal.rows);
- }
-
- private _renderRows(start: number, end: number): void {
- const buffer: IBuffer = this._terminal.buffer;
- const setSize = buffer.lines.length.toString();
- for (let i = start; i <= end; i++) {
- const lineData = buffer.translateBufferLineToString(buffer.ydisp + i, true);
- const posInSet = (buffer.ydisp + i + 1).toString();
- const element = this._rowElements[i];
- if (element) {
- if (lineData.length === 0) {
- element.innerHTML = ' ';
- } else {
- element.textContent = lineData;
- }
- element.setAttribute('aria-posinset', posInSet);
- element.setAttribute('aria-setsize', setSize);
- }
- }
- this._announceCharacters();
- }
-
- private _refreshRowsDimensions(): void {
- if (!this._renderService.dimensions.actualCellHeight) {
- return;
- }
- if (this._rowElements.length !== this._terminal.rows) {
- this._onResize(this._terminal.rows);
- }
- for (let i = 0; i < this._terminal.rows; i++) {
- this._refreshRowDimensions(this._rowElements[i]);
- }
- }
-
- private _refreshRowDimensions(element: HTMLElement): void {
- element.style.height = `${this._renderService.dimensions.actualCellHeight}px`;
- }
-
- private _announceCharacters(): void {
- if (this._charsToAnnounce.length === 0) {
- return;
- }
- this._liveRegion.textContent += this._charsToAnnounce;
- this._charsToAnnounce = '';
- }
-}
projects / VSoRC / .git / blobdiff