Make environment variable widget screen reader and keyboard accessible

src/vs/workbench/contrib/terminal/browser/terminal.ts

@@ -318,6 +318,11 @@ export interface ITerminalInstance {
 
 	readonly navigationMode: INavigationMode | undefined;
 
+	/**
+	 * Shows the environment information hover if the widget exists.
+	 */
+	showEnvironmentInfoHover(): void;
+
 	/**
 	 * Dispose the terminal instance, removing it from the panel/service and freeing up resources.
 	 *

src/vs/workbench/contrib/terminal/browser/terminalActions.ts

@@ -1280,4 +1280,17 @@ export function registerTerminalActions() {
 			accessor.get(ITerminalService).getActiveInstance()?.relaunch();
 		}
 	});
+	registerAction2(class extends Action2 {
+		constructor() {
+			super({
+				id: TERMINAL_COMMAND_ID.SHOW_ENVIRONMENT_INFORMATION,
+				title: localize('workbench.action.terminal.showEnvironmentInformation', "Show Environment Information"),
+				f1: true,
+				category
+			});
+		}
+		run(accessor: ServicesAccessor) {
+			accessor.get(ITerminalService).getActiveInstance()?.showEnvironmentInfoHover();
+		}
+	});
 }

src/vs/workbench/contrib/terminal/browser/terminalInstance.ts

@@ -99,7 +99,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 
 	private _widgetManager: TerminalWidgetManager = this._instantiationService.createInstance(TerminalWidgetManager);
 	private _linkManager: TerminalLinkManager | undefined;
-	private _environmentVariableWidgetDisposable: IDisposable | undefined;
+	private _environmentInfo: { widget: EnvironmentVariableInfoWidget, disposable: IDisposable } | undefined;
 	private _commandTrackerAddon: CommandTrackerAddon | undefined;
 	private _navigationModeAddon: INavigationMode & ITerminalAddon | undefined;
 
@@ -1359,12 +1359,21 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		this._shellLaunchConfig.env = shellLaunchConfig.env;
 	}
 
+	public showEnvironmentInfoHover(): void {
+		if (this._environmentInfo) {
+			this._environmentInfo.widget.focus();
+		}
+	}
+
 	private _onEnvironmentVariableInfoChanged(info: IEnvironmentVariableInfo): void {
+		if (info.requiresAction) {
+			this._xterm?.textarea?.setAttribute('aria-label', nls.localize('terminalStaleTextBoxAriaLabel', "Terminal {0} environment is stale, run the 'Show Environment Variable Information' command for more information", this._id));
+		}
 		this._refreshEnvironmentVariableInfoWidgetState(info);
 	}
 
 	private _refreshEnvironmentVariableInfoWidgetState(info?: IEnvironmentVariableInfo): void {
-		this._environmentVariableWidgetDisposable?.dispose();
+		this._environmentInfo?.disposable.dispose();
 
 		// Check if the widget should not exist
 		if (!info ||
@@ -1375,7 +1384,10 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 
 		// (Re-)create the widget
 		const widget = this._instantiationService.createInstance(EnvironmentVariableInfoWidget, info);
-		this._environmentVariableWidgetDisposable = this._widgetManager.attachWidget(widget);
+		const disposable = this._widgetManager.attachWidget(widget);
+		if (disposable) {
+			this._environmentInfo = { widget, disposable };
+		}
 	}
 
 	private _getXtermTheme(theme?: IColorTheme): any {

src/vs/workbench/contrib/terminal/browser/widgets/environmentVariableInfoWidget.ts

@@ -40,6 +40,11 @@ export class EnvironmentVariableInfoWidget extends Widget implements ITerminalWi
 		this._domNode?.parentElement?.removeChild(this._domNode);
 	}
 
+	focus() {
+		this._showHover();
+		this._hoverWidget?.focus();
+	}
+
 	private _showHover() {
 		if (!this._domNode || !this._container || this._hoverWidget) {
 			return;

src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts

@@ -13,6 +13,7 @@ import { editorHoverHighlight, editorHoverBackground, editorHoverBorder, textLin
 import * as dom from 'vs/base/browser/dom';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IHoverTarget, HorizontalAnchorSide, VerticalAnchorSide } from 'vs/workbench/contrib/terminal/browser/widgets/widgets';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 const $ = dom.$;
 
@@ -47,6 +48,13 @@ export class HoverWidget extends Widget {
 		// not be selected.
 		this.onmousedown(this._domNode, e => e.stopPropagation());
 
+		// Hide hover on escape
+		this.onkeydown(this._domNode, e => {
+			if (e.equals(KeyCode.Escape)) {
+				this.dispose();
+			}
+		});
+
 		const rowElement = $('div.hover-row.markdown-hover');
 		const contentsElement = $('div.hover-contents');
 		const markdownElement = renderMarkdown(this._text, {
@@ -79,6 +87,8 @@ export class HoverWidget extends Widget {
 	private _renderAction(parent: HTMLElement, actionOptions: { label: string, iconClass?: string, run: (target: HTMLElement) => void, commandId: string }): IDisposable {
 		const actionContainer = dom.append(parent, $('div.action-container'));
 		const action = dom.append(actionContainer, $('a.action'));
+		action.setAttribute('href', '#');
+		action.setAttribute('role', 'button');
 		if (actionOptions.iconClass) {
 			dom.append(action, $(`span.icon.${actionOptions.iconClass}`));
 		}
@@ -127,6 +137,10 @@ export class HoverWidget extends Widget {
 		}
 	}
 
+	public focus() {
+		this._domNode.focus();
+	}
+
 	public dispose(): void {
 		if (!this._isDisposed) {
 			this._onDispose.fire();

src/vs/workbench/contrib/terminal/common/terminal.ts

@@ -488,7 +488,8 @@ export const enum TERMINAL_COMMAND_ID {
 	TOGGLE_FIND_CASE_SENSITIVE = 'workbench.action.terminal.toggleFindCaseSensitive',
 	NAVIGATION_MODE_EXIT = 'workbench.action.terminal.navigationModeExit',
 	NAVIGATION_MODE_FOCUS_NEXT = 'workbench.action.terminal.navigationModeFocusNext',
-	NAVIGATION_MODE_FOCUS_PREVIOUS = 'workbench.action.terminal.navigationModeFocusPrevious'
+	NAVIGATION_MODE_FOCUS_PREVIOUS = 'workbench.action.terminal.navigationModeFocusPrevious',
+	SHOW_ENVIRONMENT_INFORMATION = 'workbench.action.terminal.showEnvironmentInformation'
 }
 
 export const DEFAULT_COMMANDS_TO_SKIP_SHELL: string[] = [