From 0214537508b1e24b5c06a349a7f0e7a386a492ea Mon Sep 17 00:00:00 2001 From: Megan Rogge Date: Fri, 20 Jan 2023 09:08:42 -0800 Subject: [PATCH 1/6] use textbox instead of div --- src/browser/AccessibilityManager.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index 1996faef35..da69430d9a 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -89,7 +89,7 @@ export class AccessibilityManager extends Disposable { throw new Error('Cannot enable accessibility before Terminal.open'); } - this._accessiblityBuffer = document.createElement('div'); + this._accessiblityBuffer = document.createElement('textarea'); this._accessiblityBuffer.ariaLabel = Strings.accessibilityBuffer; this._accessiblityBuffer.classList.add('xterm-accessibility-buffer'); @@ -326,14 +326,15 @@ export class AccessibilityManager extends Disposable { } const { bufferElements } = this._terminal.viewport.getBufferElements(0); + const content = []; for (const element of bufferElements) { if (element.textContent) { - element.textContent = element.textContent.replace(new RegExp(' ', 'g'), '\xA0'); + content.push(element.textContent.replace(new RegExp(' ', 'g'), '\xA0')); } } + this._accessiblityBuffer.textContent = content.join('\n'); this._accessiblityBuffer.tabIndex = 0; - this._accessiblityBuffer.ariaRoleDescription = 'document'; - this._accessiblityBuffer.replaceChildren(...bufferElements); + this._accessiblityBuffer.ariaRoleDescription = 'textbox'; this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight; this._accessiblityBuffer.focus(); } From 85dc56b82dedce1df27dbb0d1f2e46762efaa640 Mon Sep 17 00:00:00 2001 From: Megan Rogge Date: Fri, 20 Jan 2023 09:14:50 -0800 Subject: [PATCH 2/6] no spellcheck --- src/browser/AccessibilityManager.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index da69430d9a..7f84374de4 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -335,6 +335,7 @@ export class AccessibilityManager extends Disposable { this._accessiblityBuffer.textContent = content.join('\n'); this._accessiblityBuffer.tabIndex = 0; this._accessiblityBuffer.ariaRoleDescription = 'textbox'; + this._accessibilityTreeRoot.spellcheck = false; this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight; this._accessiblityBuffer.focus(); } From 015521a6c08925428c73f8698ba77724e4019601 Mon Sep 17 00:00:00 2001 From: Megan Rogge Date: Fri, 20 Jan 2023 09:26:04 -0800 Subject: [PATCH 3/6] set selection to end --- src/browser/AccessibilityManager.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index d5034b8eba..5fbb11dc42 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -28,7 +28,7 @@ export class AccessibilityManager extends Disposable { private _rowElements: HTMLElement[]; private _liveRegion: HTMLElement; private _liveRegionLineCount: number = 0; - private _accessiblityBuffer: HTMLElement; + private _accessiblityBuffer: HTMLTextAreaElement; private _renderRowsDebouncer: IRenderDebouncer; private _screenDprMonitor: ScreenDprMonitor; @@ -336,6 +336,10 @@ export class AccessibilityManager extends Disposable { this._accessibilityTreeRoot.spellcheck = false; this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight; this._accessiblityBuffer.focus(); + + const end = this._accessiblityBuffer.value.length; + this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight; + this._accessiblityBuffer.setSelectionRange(end, end); } private _handleColorChange(colorSet: ReadonlyColorSet): void { From 021f63c6f48185a9b61ae57e2b9f2a5cb54e0098 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Mon, 23 Jan 2023 10:14:04 -0600 Subject: [PATCH 4/6] make accessibility buffer readonly --- src/browser/AccessibilityManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index 5fbb11dc42..42e1087491 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -91,8 +91,8 @@ export class AccessibilityManager extends Disposable { this._accessiblityBuffer = document.createElement('textarea'); this._accessiblityBuffer.ariaLabel = Strings.accessibilityBuffer; + this._accessiblityBuffer.readOnly = true; this._accessiblityBuffer.classList.add('xterm-accessibility-buffer'); - this._accessiblityBuffer.contentEditable = 'true'; this._accessiblityBuffer.addEventListener('focus', () => this._refreshAccessibilityBuffer()); this._terminal.element.insertAdjacentElement('afterbegin', this._accessiblityBuffer); From c24522892253d772e511ce3f04e4381c66e94306 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Mon, 23 Jan 2023 12:53:15 -0600 Subject: [PATCH 5/6] rm on dispose, don't focus --- src/browser/AccessibilityManager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index 42e1087491..a85c7152ce 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -121,6 +121,7 @@ export class AccessibilityManager extends Disposable { // media query that drives the ScreenDprMonitor isn't supported this.register(addDisposableDomListener(window, 'resize', () => this._refreshRowsDimensions())); this.register(toDisposable(() => { + this._accessiblityBuffer.remove(); this._accessibilityTreeRoot.remove(); this._rowElements.length = 0; })); @@ -313,7 +314,7 @@ export class AccessibilityManager extends Disposable { if (this._charsToAnnounce.length === 0) { return; } - this._liveRegion.textContent += this._charsToAnnounce; + this._liveRegion.textContent += this._charsToAnnounce; this._charsToAnnounce = ''; } @@ -335,7 +336,6 @@ export class AccessibilityManager extends Disposable { this._accessiblityBuffer.ariaRoleDescription = 'textbox'; this._accessibilityTreeRoot.spellcheck = false; this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight; - this._accessiblityBuffer.focus(); const end = this._accessiblityBuffer.value.length; this._accessiblityBuffer.scrollTop = this._accessiblityBuffer.scrollHeight; From 52ce4f786e8b488f1ae3b4f510b8a6ee9aadebab Mon Sep 17 00:00:00 2001 From: Megan Rogge Date: Mon, 23 Jan 2023 12:54:15 -0600 Subject: [PATCH 6/6] Update src/browser/AccessibilityManager.ts --- src/browser/AccessibilityManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index a85c7152ce..a1d23f8376 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -314,7 +314,7 @@ export class AccessibilityManager extends Disposable { if (this._charsToAnnounce.length === 0) { return; } - this._liveRegion.textContent += this._charsToAnnounce; + this._liveRegion.textContent += this._charsToAnnounce; this._charsToAnnounce = ''; }