Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

accessibilityBuffer -> accessibleBuffer #4406

Merged
merged 2 commits into from
Feb 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions css/xterm.css
Original file line number Diff line number Diff line change
Expand Up @@ -151,11 +151,11 @@
color: transparent;
}

.xterm .xterm-accessibility-buffer div {
.xterm .xterm-accessible-buffer div {
white-space: pre-wrap;
}

.xterm .xterm-accessibility-buffer {
.xterm .xterm-accessible-buffer {
position: absolute;
left: 0;
top: 0;
Expand All @@ -169,7 +169,7 @@
overflow-x: hidden;
}

.xterm .xterm-accessibility-buffer:focus-within {
.xterm .xterm-accessible-buffer:focus-within {
opacity: 1;
z-index: 20;
}
Expand Down
56 changes: 28 additions & 28 deletions src/browser/AccessibleBuffer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import { ITerminalOptions } from 'xterm';
import { IDisposable } from 'common/Types';

export class AccessibleBuffer extends Disposable {
private _accessiblityBuffer: HTMLElement;
private _isAccessibilityBufferActive: boolean = false;
public get isAccessibilityBufferActive(): boolean { return this._isAccessibilityBufferActive; }
private _element: HTMLElement;
private _isAccessibleBufferActive: boolean = false;
public get isAccessibleBufferActive(): boolean { return this._isAccessibleBufferActive; }
private _provider: IBufferElementProvider | undefined;
constructor(
private readonly _terminal: ITerminal,
Expand All @@ -25,34 +25,34 @@ export class AccessibleBuffer extends Disposable {
) {
super();
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._accessiblityBuffer.setAttribute('role', 'document');
this._accessiblityBuffer.ariaRoleDescription = Strings.accessibilityBuffer;
this._accessiblityBuffer.tabIndex = 0;
this._accessiblityBuffer.classList.add('xterm-accessibility-buffer');
this._terminal.element.insertAdjacentElement('afterbegin', this._accessiblityBuffer);
this._element = document.createElement('div');
this._element.setAttribute('role', 'document');
this._element.ariaRoleDescription = Strings.accessibleBuffer;
this._element.tabIndex = 0;
this._element.classList.add('xterm-accessible-buffer');
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') {
this._isAccessibilityBufferActive = false;
this._isAccessibleBufferActive = false;
}
}
));
this.register(addDisposableDomListener(this._accessiblityBuffer, 'focus', () => this._refreshAccessibilityBuffer()));
this.register(addDisposableDomListener(this._accessiblityBuffer, 'focusout', (e) => {
if (!this._accessiblityBuffer.contains(e.element)) {
this._isAccessibilityBufferActive = false;
this.register(addDisposableDomListener(this._element, 'focus', () => this._refreshAccessibleBuffer()));
this.register(addDisposableDomListener(this._element, 'focusout', (e) => {
if (!this._element.contains(e.element)) {
this._isAccessibleBufferActive = false;
}
}));

this._handleColorChange(themeService.colors);
this.register(themeService.onChangeColors(e => this._handleColorChange(e)));
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 {
Expand All @@ -67,12 +67,12 @@ export class AccessibleBuffer extends Disposable {
};
}

private _refreshAccessibilityBuffer(): void {
private _refreshAccessibleBuffer(): void {
if (!this._terminal.viewport) {
return;
}
this._isAccessibilityBufferActive = true;
this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight;
this._isAccessibleBufferActive = true;
this._element.scrollTop = this._element.scrollHeight;
const bufferElements = this._provider?.provideBufferElements();
if (!bufferElements) {
const { bufferElements } = this._terminal.viewport.getBufferElements(0);
Expand All @@ -81,21 +81,21 @@ export class AccessibleBuffer extends Disposable {
element.textContent = element.textContent.replace(new RegExp(' ', 'g'), '\xA0');
}
}
this._accessiblityBuffer.replaceChildren(...bufferElements);
this._element.replaceChildren(...bufferElements);
} else {
this._accessiblityBuffer.replaceChildren(bufferElements);
this._element.replaceChildren(bufferElements);
}
}

private _handleColorChange(colorSet: ReadonlyColorSet): void {
this._accessiblityBuffer.style.backgroundColor = colorSet.background.css;
this._accessiblityBuffer.style.color = colorSet.foreground.css;
this._element.style.backgroundColor = colorSet.background.css;
this._element.style.color = colorSet.foreground.css;
}

private _handleFontOptionChange(options: Required<ITerminalOptions>): void {
this._accessiblityBuffer.style.fontFamily = options.fontFamily;
this._accessiblityBuffer.style.fontSize = `${options.fontSize}px`;
this._accessiblityBuffer.style.lineHeight = `${options.lineHeight * (this._renderService.dimensions.css.cell.height)}px`;
this._accessiblityBuffer.style.letterSpacing = `${options.letterSpacing}px`;
this._element.style.fontFamily = options.fontFamily;
this._element.style.fontSize = `${options.fontSize}px`;
this._element.style.lineHeight = `${options.lineHeight * (this._renderService.dimensions.css.cell.height)}px`;
this._element.style.letterSpacing = `${options.letterSpacing}px`;
}
}
2 changes: 1 addition & 1 deletion src/browser/LocalizableStrings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ export let promptLabel = 'Terminal input';
export let tooMuchOutput = 'Too much output to announce, navigate to rows manually to read';

// eslint-disable-next-line prefer-const
export let accessibilityBuffer = 'Accessibility buffer';
export let accessibleBuffer = 'Accessibility buffer';
2 changes: 1 addition & 1 deletion src/browser/Terminal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -778,7 +778,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
*/
this.register(addDisposableDomListener(el, 'mousedown', (ev: MouseEvent) => {
ev.preventDefault();
if (this._accessibleBuffer?.isAccessibilityBufferActive) {
if (this._accessibleBuffer?.isAccessibleBufferActive) {
return;
}
this.focus();
Expand Down
2 changes: 1 addition & 1 deletion typings/xterm.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ declare module 'xterm' {
/**
* The aria label for the accessibility buffer
*/
accessibilityBuffer: string;
accessibleBuffer: string;
}

/**
Expand Down