make terminal output feature accessible to screen reader users (#276211)

Author: meganrogge

src/vs/platform/accessibility/browser/accessibleView.ts

@@ -20,6 +20,7 @@ export const enum AccessibleViewProviderId {
 	DiffEditor = 'diffEditor',
 	MergeEditor = 'mergeEditor',
 	PanelChat = 'panelChat',
+	ChatTerminalOutput = 'chatTerminalOutput',
 	InlineChat = 'inlineChat',
 	AgentChat = 'agentChat',
 	QuickChat = 'quickChat',

src/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration.ts

@@ -51,7 +51,8 @@ export const enum AccessibilityVerbositySettingId {
 	MergeEditor = 'accessibility.verbosity.mergeEditor',
 	Chat = 'accessibility.verbosity.panelChat',
 	InlineChat = 'accessibility.verbosity.inlineChat',
-	TerminalChat = 'accessibility.verbosity.terminalChat',
+	TerminalInlineChat = 'accessibility.verbosity.terminalChat',
+	TerminalChatOutput = 'accessibility.verbosity.terminalChatOutput',
 	InlineCompletions = 'accessibility.verbosity.inlineCompletions',
 	KeybindingsEditor = 'accessibility.verbosity.keybindingsEditor',
 	Notebook = 'accessibility.verbosity.notebook',
@@ -141,6 +142,10 @@ const configuration: IConfigurationNode = {
 			description: localize('verbosity.interactiveEditor.description', 'Provide information about how to access the inline editor chat accessibility help menu and alert with hints that describe how to use the feature when the input is focused.'),
 			...baseVerbosityProperty
 		},
+		[AccessibilityVerbositySettingId.TerminalChatOutput]: {
+			description: localize('verbosity.terminalChatOutput.description', 'Provide information about how to open the chat terminal output in the Accessible View.'),
+			...baseVerbosityProperty
+		},
 		[AccessibilityVerbositySettingId.InlineCompletions]: {
 			description: localize('verbosity.inlineCompletions.description', 'Provide information about how to access the inline completions hover and Accessible View.'),
 			...baseVerbosityProperty

src/vs/workbench/contrib/chat/browser/chat.contribution.ts

@@ -108,6 +108,7 @@ import { ChatCompatibilityNotifier, ChatExtensionPointHandler } from './chatPart
 import { ChatPasteProvidersFeature } from './chatPasteProviders.js';
 import { QuickChatService } from './chatQuick.js';
 import { ChatResponseAccessibleView } from './chatResponseAccessibleView.js';
+import { ChatTerminalOutputAccessibleView } from './chatTerminalOutputAccessibleView.js';
 import { LocalChatSessionsProvider } from './chatSessions/localChatSessionsProvider.js';
 import { ChatSessionsView, ChatSessionsViewContrib } from './chatSessions/view/chatSessionsView.js';
 import { ChatSetupContribution, ChatTeardownContribution } from './chatSetup.js';
@@ -870,6 +871,7 @@ class ChatAgentSettingContribution extends Disposable implements IWorkbenchContr
 	}
 }
 
+AccessibleViewRegistry.register(new ChatTerminalOutputAccessibleView());
 AccessibleViewRegistry.register(new ChatResponseAccessibleView());
 AccessibleViewRegistry.register(new PanelChatAccessibilityHelp());
 AccessibleViewRegistry.register(new QuickChatAccessibilityHelp());

src/vs/workbench/contrib/chat/browser/chatContentParts/toolInvocationParts/chatTerminalToolProgressPart.ts

@@ -39,6 +39,10 @@ import * as domSanitize from '../../../../../../base/browser/domSanitize.js';
 import { DomSanitizerConfig } from '../../../../../../base/browser/domSanitize.js';
 import { allowedMarkdownHtmlAttributes } from '../../../../../../base/browser/markdownRenderer.js';
 import { stripIcons } from '../../../../../../base/common/iconLabels.js';
+import { IAccessibleViewService } from '../../../../../../platform/accessibility/browser/accessibleView.js';
+import { IContextKey, IContextKeyService } from '../../../../../../platform/contextkey/common/contextkey.js';
+import { AccessibilityVerbositySettingId } from '../../../../accessibility/browser/accessibilityConfiguration.js';
+import { ChatContextKeys } from '../../../common/chatContextKeys.js';
 import { EditorPool } from '../chatContentCodePools.js';
 
 const MAX_TERMINAL_OUTPUT_PREVIEW_HEIGHT = 200;
@@ -52,6 +56,8 @@ const sanitizerConfig = Object.freeze<DomSanitizerConfig>({
 	}
 });
 
+let lastFocusedProgressPart: ChatTerminalToolProgressPart | undefined;
+
 export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart {
 	public readonly domNode: HTMLElement;
 
@@ -64,6 +70,10 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 	private _outputContent: HTMLElement | undefined;
 	private _outputResizeObserver: ResizeObserver | undefined;
 	private _renderedOutputHeight: number | undefined;
+	private readonly _terminalOutputContextKey: IContextKey<boolean>;
+	private readonly _outputAriaLabelBase: string;
+	private readonly _displayCommand: string;
+	private _lastOutputTruncated = false;
 
 	private readonly _showOutputAction = this._register(new MutableDisposable<ToggleChatTerminalOutputAction>());
 	private _showOutputActionAdded = false;
@@ -89,6 +99,8 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 		@IInstantiationService private readonly _instantiationService: IInstantiationService,
 		@ITerminalChatService private readonly _terminalChatService: ITerminalChatService,
 		@ITerminalService private readonly _terminalService: ITerminalService,
+		@IContextKeyService private readonly _contextKeyService: IContextKeyService,
+		@IAccessibleViewService private readonly _accessibleViewService: IAccessibleViewService,
 	) {
 		super(toolInvocation);
 
@@ -102,6 +114,9 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 		]);
 
 		const command = terminalData.commandLine.userEdited ?? terminalData.commandLine.toolEdited ?? terminalData.commandLine.original;
+		this._displayCommand = stripIcons(command);
+		this._terminalOutputContextKey = ChatContextKeys.inChatTerminalToolOutput.bindTo(this._contextKeyService);
+		this._outputAriaLabelBase = localize('chatTerminalOutputAriaLabel', 'Terminal output for {0}', this._displayCommand);
 
 		this._titlePart = elements.title;
 		const titlePart = this._register(_instantiationService.createInstance(
@@ -161,6 +176,9 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 		this._outputContainer = elements.output;
 		this._outputContainer.classList.add('collapsed');
 		this._outputBody = dom.$('.chat-terminal-output-body');
+		this._register(dom.addDisposableListener(this._outputContainer, dom.EventType.FOCUS_IN, () => this._handleOutputFocus()));
+		this._register(dom.addDisposableListener(this._outputContainer, dom.EventType.FOCUS_OUT, e => this._handleOutputBlur(e as FocusEvent)));
+		this._register(toDisposable(() => this._handleDispose()));
 
 		const progressPart = this._register(_instantiationService.createInstance(ChatProgressSubPart, elements.container, this.getIcon(), terminalData.autoApproveInfo));
 		this.domNode = progressPart.domNode;
@@ -388,6 +406,7 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 		} else {
 			this._ensureOutputResizeObserver();
 		}
+		this._updateOutputAriaLabel();
 
 		return true;
 	}
@@ -447,6 +466,63 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 		}));
 	}
 
+	private _handleOutputFocus(): void {
+		this._terminalOutputContextKey.set(true);
+		lastFocusedProgressPart = this;
+		this._updateOutputAriaLabel();
+	}
+
+	private _handleOutputBlur(event: FocusEvent): void {
+		const nextTarget = event.relatedTarget as HTMLElement | null;
+		if (nextTarget && this._outputContainer.contains(nextTarget)) {
+			return;
+		}
+		this._terminalOutputContextKey.reset();
+		this._clearLastFocusedPart();
+	}
+
+	private _handleDispose(): void {
+		this._terminalOutputContextKey.reset();
+		this._clearLastFocusedPart();
+	}
+
+	private _clearLastFocusedPart(): void {
+		if (lastFocusedProgressPart === this) {
+			lastFocusedProgressPart = undefined;
+		}
+	}
+
+	private _updateOutputAriaLabel(): void {
+		if (!this._outputScrollbar) {
+			return;
+		}
+		const scrollableDomNode = this._outputScrollbar.getDomNode();
+		scrollableDomNode.setAttribute('role', 'region');
+		const accessibleViewHint = this._accessibleViewService.getOpenAriaHint(AccessibilityVerbositySettingId.TerminalChatOutput);
+		const label = accessibleViewHint
+			? this._outputAriaLabelBase + ', ' + accessibleViewHint
+			: this._outputAriaLabelBase;
+		scrollableDomNode.setAttribute('aria-label', label);
+	}
+
+	public getCommandAndOutputAsText(): string | undefined {
+		const commandHeader = localize('chatTerminalOutputAccessibleViewHeader', 'Command: {0}', this._displayCommand);
+		const command = this._getResolvedCommand();
+		const output = command?.getOutput()?.trimEnd();
+		if (!output) {
+			return `${commandHeader}\n${localize('chat.terminalOutputEmpty', 'No output was produced by the command.')}`;
+		}
+		let result = `${commandHeader}\n${output}`;
+		if (this._lastOutputTruncated) {
+			result += `\n\n${localize('chat.terminalOutputTruncated', 'Output truncated to first {0} lines.', CHAT_TERMINAL_OUTPUT_MAX_PREVIEW_LINES)}`;
+		}
+		return result;
+	}
+
+	public focusOutput(): void {
+		this._outputScrollbar?.getDomNode().focus();
+	}
+
 	private async _collectOutput(terminalInstance: ITerminalInstance | undefined): Promise<{ text: string; truncated: boolean } | undefined> {
 		const commandDetection = terminalInstance?.capabilities.get(TerminalCapability.CommandDetection);
 		const commands = commandDetection?.commands;
@@ -463,6 +539,7 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 	}
 
 	private _renderOutput(result: { text: string; truncated: boolean }): HTMLElement {
+		this._lastOutputTruncated = result.truncated;
 		const container = document.createElement('div');
 		container.classList.add('chat-terminal-output-content');
 
@@ -482,7 +559,7 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 		if (result.truncated) {
 			const note = document.createElement('div');
 			note.classList.add('chat-terminal-output-info');
-			note.textContent = localize('chat.terminalOutputTruncated', 'Output truncated to first {0} characters.', CHAT_TERMINAL_OUTPUT_MAX_PREVIEW_LINES);
+			note.textContent = localize('chat.terminalOutputTruncated', 'Output truncated to first {0} lines.', CHAT_TERMINAL_OUTPUT_MAX_PREVIEW_LINES);
 			container.appendChild(note);
 		}
 
@@ -500,6 +577,10 @@ export class ChatTerminalToolProgressPart extends BaseChatToolInvocationSubPart
 	}
 }
 
+export function getFocusedTerminalToolProgressPart(): ChatTerminalToolProgressPart | undefined {
+	return lastFocusedProgressPart;
+}
+
 export const openTerminalSettingsLinkCommandId = '_chat.openTerminalSettingsLink';
 
 CommandsRegistry.registerCommand(openTerminalSettingsLinkCommandId, async (accessor, scopeRaw: string) => {

src/vs/workbench/contrib/chat/browser/chatTerminalOutputAccessibleView.ts

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { AccessibleContentProvider, AccessibleViewProviderId, AccessibleViewType } from '../../../../platform/accessibility/browser/accessibleView.js';
+import { IAccessibleViewImplementation } from '../../../../platform/accessibility/browser/accessibleViewRegistry.js';
+import { ServicesAccessor } from '../../../../platform/instantiation/common/instantiation.js';
+import { AccessibilityVerbositySettingId } from '../../accessibility/browser/accessibilityConfiguration.js';
+import { ChatContextKeys } from '../common/chatContextKeys.js';
+import { getFocusedTerminalToolProgressPart } from './chatContentParts/toolInvocationParts/chatTerminalToolProgressPart.js';
+
+export class ChatTerminalOutputAccessibleView implements IAccessibleViewImplementation {
+	readonly priority = 115;
+	readonly name = 'chatTerminalOutput';
+	readonly type = AccessibleViewType.View;
+	readonly when = ChatContextKeys.inChatTerminalToolOutput;
+
+	getProvider(_accessor: ServicesAccessor) {
+		const part = getFocusedTerminalToolProgressPart();
+		if (!part) {
+			return;
+		}
+
+		const content = part.getCommandAndOutputAsText();
+		if (!content) {
+			return;
+		}
+
+		return new AccessibleContentProvider(
+			AccessibleViewProviderId.ChatTerminalOutput,
+			{ type: AccessibleViewType.View, id: AccessibleViewProviderId.ChatTerminalOutput, language: 'text' },
+			() => content,
+			() => part.focusOutput(),
+			AccessibilityVerbositySettingId.TerminalChatOutput
+		);
+	}
+}

src/vs/workbench/contrib/chat/common/chatContextKeys.ts

@@ -33,6 +33,7 @@ export namespace ChatContextKeys {
 	export const inChatInput = new RawContextKey<boolean>('inChatInput', false, { type: 'boolean', description: localize('inInteractiveInput', "True when focus is in the chat input, false otherwise.") });
 	export const inChatSession = new RawContextKey<boolean>('inChat', false, { type: 'boolean', description: localize('inChat', "True when focus is in the chat widget, false otherwise.") });
 	export const inChatEditor = new RawContextKey<boolean>('inChatEditor', false, { type: 'boolean', description: localize('inChatEditor', "Whether focus is in a chat editor.") });
+	export const inChatTerminalToolOutput = new RawContextKey<boolean>('inChatTerminalToolOutput', false, { type: 'boolean', description: localize('inChatTerminalToolOutput', "True when focus is in the chat terminal output region.") });
 	export const hasPromptFile = new RawContextKey<boolean>('chatPromptFileAttached', false, { type: 'boolean', description: localize('chatPromptFileAttachedContextDescription', "True when the chat has a prompt file attached.") });
 	export const chatModeKind = new RawContextKey<ChatModeKind>('chatAgentKind', ChatModeKind.Ask, { type: 'string', description: localize('agentKind', "The 'kind' of the current agent.") });
 	export const chatToolCount = new RawContextKey<number>('chatToolCount', 0, { type: 'number', description: localize('chatToolCount', "The number of tools available in the current agent.") });

src/vs/workbench/contrib/terminalContrib/chat/browser/terminal.initialHint.contribution.ts

@@ -225,7 +225,7 @@ class TerminalInitialHintWidget extends Disposable {
 	) {
 		super();
 		this._toDispose.add(_instance.onDidFocus(() => {
-			if (this._instance.hasFocus && this._isVisible && this._ariaLabel && this._configurationService.getValue(AccessibilityVerbositySettingId.TerminalChat)) {
+			if (this._instance.hasFocus && this._isVisible && this._ariaLabel && this._configurationService.getValue(AccessibilityVerbositySettingId.TerminalInlineChat)) {
 				status(this._ariaLabel);
 			}
 		}));
@@ -323,7 +323,7 @@ class TerminalInitialHintWidget extends Disposable {
 
 			const { hintElement, ariaLabel } = this._getHintInlineChat(agents);
 			this._domNode.append(hintElement);
-			this._ariaLabel = ariaLabel.concat(localize('disableHint', ' Toggle {0} in settings to disable this hint.', AccessibilityVerbositySettingId.TerminalChat));
+			this._ariaLabel = ariaLabel.concat(localize('disableHint', ' Toggle {0} in settings to disable this hint.', AccessibilityVerbositySettingId.TerminalInlineChat));
 
 			this._toDispose.add(dom.addDisposableListener(this._domNode, 'click', () => {
 				this._domNode?.remove();

src/vs/workbench/contrib/terminalContrib/chat/browser/terminalChatAccessibilityHelp.ts

@@ -32,7 +32,7 @@ export class TerminalChatAccessibilityHelp implements IAccessibleViewImplementat
 			{ type: AccessibleViewType.Help },
 			() => helpText,
 			() => TerminalChatController.get(instance)?.terminalChatWidget?.focus(),
-			AccessibilityVerbositySettingId.TerminalChat,
+			AccessibilityVerbositySettingId.TerminalInlineChat,
 		);
 	}
 }