accessibilityBuffer -> accessibleBuffer (#4406)
This commit is contained in:
+3
-3
@@ -151,11 +151,11 @@
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xterm .xterm-accessibility-buffer div {
|
.xterm .xterm-accessible-buffer div {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xterm .xterm-accessibility-buffer {
|
.xterm .xterm-accessible-buffer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -169,7 +169,7 @@
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xterm .xterm-accessibility-buffer:focus-within {
|
.xterm .xterm-accessible-buffer:focus-within {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ import { ITerminalOptions } from 'xterm';
|
|||||||
import { IDisposable } from 'common/Types';
|
import { IDisposable } from 'common/Types';
|
||||||
|
|
||||||
export class AccessibleBuffer extends Disposable {
|
export class AccessibleBuffer extends Disposable {
|
||||||
private _accessiblityBuffer: HTMLElement;
|
private _element: HTMLElement;
|
||||||
private _isAccessibilityBufferActive: boolean = false;
|
private _isAccessibleBufferActive: boolean = false;
|
||||||
public get isAccessibilityBufferActive(): boolean { return this._isAccessibilityBufferActive; }
|
public get isAccessibleBufferActive(): boolean { return this._isAccessibleBufferActive; }
|
||||||
private _provider: IBufferElementProvider | undefined;
|
private _provider: IBufferElementProvider | undefined;
|
||||||
constructor(
|
constructor(
|
||||||
private readonly _terminal: ITerminal,
|
private readonly _terminal: ITerminal,
|
||||||
@@ -25,26 +25,26 @@ export class AccessibleBuffer extends Disposable {
|
|||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
if (!this._terminal.element) {
|
if (!this._terminal.element) {
|
||||||
throw new Error('Cannot enable accessibility buffer before Terminal.open');
|
throw new Error('Cannot enable accessible buffer before Terminal.open');
|
||||||
}
|
}
|
||||||
|
|
||||||
this._accessiblityBuffer = document.createElement('div');
|
this._element = document.createElement('div');
|
||||||
this._accessiblityBuffer.setAttribute('role', 'document');
|
this._element.setAttribute('role', 'document');
|
||||||
this._accessiblityBuffer.ariaRoleDescription = Strings.accessibilityBuffer;
|
this._element.ariaRoleDescription = Strings.accessibleBuffer;
|
||||||
this._accessiblityBuffer.tabIndex = 0;
|
this._element.tabIndex = 0;
|
||||||
this._accessiblityBuffer.classList.add('xterm-accessibility-buffer');
|
this._element.classList.add('xterm-accessible-buffer');
|
||||||
this._terminal.element.insertAdjacentElement('afterbegin', this._accessiblityBuffer);
|
this._terminal.element.insertAdjacentElement('afterbegin', this._element);
|
||||||
|
|
||||||
this.register(addDisposableDomListener(this._accessiblityBuffer, 'keydown', (ev: KeyboardEvent) => {
|
this.register(addDisposableDomListener(this._element, 'keydown', (ev: KeyboardEvent) => {
|
||||||
if (ev.key === 'Tab') {
|
if (ev.key === 'Tab') {
|
||||||
this._isAccessibilityBufferActive = false;
|
this._isAccessibleBufferActive = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
this.register(addDisposableDomListener(this._accessiblityBuffer, 'focus', () => this._refreshAccessibilityBuffer()));
|
this.register(addDisposableDomListener(this._element, 'focus', () => this._refreshAccessibleBuffer()));
|
||||||
this.register(addDisposableDomListener(this._accessiblityBuffer, 'focusout', (e) => {
|
this.register(addDisposableDomListener(this._element, 'focusout', (e) => {
|
||||||
if (!this._accessiblityBuffer.contains(e.element)) {
|
if (!this._element.contains(e.element)) {
|
||||||
this._isAccessibilityBufferActive = false;
|
this._isAccessibleBufferActive = false;
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@@ -52,7 +52,7 @@ export class AccessibleBuffer extends Disposable {
|
|||||||
this.register(themeService.onChangeColors(e => this._handleColorChange(e)));
|
this.register(themeService.onChangeColors(e => this._handleColorChange(e)));
|
||||||
this._handleFontOptionChange(optionsService.options);
|
this._handleFontOptionChange(optionsService.options);
|
||||||
this.register(optionsService.onMultipleOptionChange(['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'], () => this._handleFontOptionChange(optionsService.options)));
|
this.register(optionsService.onMultipleOptionChange(['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'], () => this._handleFontOptionChange(optionsService.options)));
|
||||||
this.register(toDisposable(() => this._accessiblityBuffer.remove()));
|
this.register(toDisposable(() => this._element.remove()));
|
||||||
}
|
}
|
||||||
|
|
||||||
public registerBufferElementProvider(bufferProvider: IBufferElementProvider): IDisposable {
|
public registerBufferElementProvider(bufferProvider: IBufferElementProvider): IDisposable {
|
||||||
@@ -67,12 +67,12 @@ export class AccessibleBuffer extends Disposable {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private _refreshAccessibilityBuffer(): void {
|
private _refreshAccessibleBuffer(): void {
|
||||||
if (!this._terminal.viewport) {
|
if (!this._terminal.viewport) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this._isAccessibilityBufferActive = true;
|
this._isAccessibleBufferActive = true;
|
||||||
this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight;
|
this._element.scrollTop = this._element.scrollHeight;
|
||||||
const bufferElements = this._provider?.provideBufferElements();
|
const bufferElements = this._provider?.provideBufferElements();
|
||||||
if (!bufferElements) {
|
if (!bufferElements) {
|
||||||
const { bufferElements } = this._terminal.viewport.getBufferElements(0);
|
const { bufferElements } = this._terminal.viewport.getBufferElements(0);
|
||||||
@@ -81,21 +81,21 @@ export class AccessibleBuffer extends Disposable {
|
|||||||
element.textContent = element.textContent.replace(new RegExp(' ', 'g'), '\xA0');
|
element.textContent = element.textContent.replace(new RegExp(' ', 'g'), '\xA0');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._accessiblityBuffer.replaceChildren(...bufferElements);
|
this._element.replaceChildren(...bufferElements);
|
||||||
} else {
|
} else {
|
||||||
this._accessiblityBuffer.replaceChildren(bufferElements);
|
this._element.replaceChildren(bufferElements);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _handleColorChange(colorSet: ReadonlyColorSet): void {
|
private _handleColorChange(colorSet: ReadonlyColorSet): void {
|
||||||
this._accessiblityBuffer.style.backgroundColor = colorSet.background.css;
|
this._element.style.backgroundColor = colorSet.background.css;
|
||||||
this._accessiblityBuffer.style.color = colorSet.foreground.css;
|
this._element.style.color = colorSet.foreground.css;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _handleFontOptionChange(options: Required<ITerminalOptions>): void {
|
private _handleFontOptionChange(options: Required<ITerminalOptions>): void {
|
||||||
this._accessiblityBuffer.style.fontFamily = options.fontFamily;
|
this._element.style.fontFamily = options.fontFamily;
|
||||||
this._accessiblityBuffer.style.fontSize = `${options.fontSize}px`;
|
this._element.style.fontSize = `${options.fontSize}px`;
|
||||||
this._accessiblityBuffer.style.lineHeight = `${options.lineHeight * (this._renderService.dimensions.css.cell.height)}px`;
|
this._element.style.lineHeight = `${options.lineHeight * (this._renderService.dimensions.css.cell.height)}px`;
|
||||||
this._accessiblityBuffer.style.letterSpacing = `${options.letterSpacing}px`;
|
this._element.style.letterSpacing = `${options.letterSpacing}px`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,4 +12,4 @@ export let promptLabel = 'Terminal input';
|
|||||||
export let tooMuchOutput = 'Too much output to announce, navigate to rows manually to read';
|
export let tooMuchOutput = 'Too much output to announce, navigate to rows manually to read';
|
||||||
|
|
||||||
// eslint-disable-next-line prefer-const
|
// eslint-disable-next-line prefer-const
|
||||||
export let accessibilityBuffer = 'Accessibility buffer';
|
export let accessibleBuffer = 'Accessibility buffer';
|
||||||
|
|||||||
@@ -778,7 +778,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
|
|||||||
*/
|
*/
|
||||||
this.register(addDisposableDomListener(el, 'mousedown', (ev: MouseEvent) => {
|
this.register(addDisposableDomListener(el, 'mousedown', (ev: MouseEvent) => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
if (this._accessibleBuffer?.isAccessibilityBufferActive) {
|
if (this._accessibleBuffer?.isAccessibleBufferActive) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.focus();
|
this.focus();
|
||||||
|
|||||||
Vendored
+1
-1
@@ -502,7 +502,7 @@ declare module 'xterm' {
|
|||||||
/**
|
/**
|
||||||
* The aria label for the accessibility buffer
|
* The aria label for the accessibility buffer
|
||||||
*/
|
*/
|
||||||
accessibilityBuffer: string;
|
accessibleBuffer: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user