Merge pull request microsoft#184945 from microsoft/merogge/inline-outline

add border to `AccessibleView`

Author: meganrogge

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

@@ -22,7 +22,14 @@ import { getSimpleEditorOptions } from 'vs/workbench/contrib/codeEditor/browser/
 import { IDisposable } from 'xterm';
 
 
-export interface IAccessibleContentProvider { id: string; provideContent(): string; onClose(): void; onKeyDown?(e: IKeyboardEvent): void; options: IAccessibleViewOptions }
+export interface IAccessibleContentProvider {
+	id: string;
+	provideContent(): string;
+	onClose(): void;
+	onKeyDown?(e: IKeyboardEvent): void;
+	options: IAccessibleViewOptions;
+}
+
 export const IAccessibleViewService = createDecorator<IAccessibleViewService>('accessibleViewService');
 
 export interface IAccessibleViewService {
@@ -96,7 +103,7 @@ class AccessibleView extends Disposable {
 			if (!domNode) {
 				return;
 			}
-			container.appendChild(domNode);
+			container.appendChild(this._editorContainer);
 			this._layout();
 			this._register(this._editorWidget.onKeyDown((e) => {
 				if (e.keyCode === KeyCode.Escape) {
@@ -113,21 +120,16 @@ class AccessibleView extends Disposable {
 	}
 
 	private _layout(): void {
-		const domNode = this._editorWidget.getDomNode();
-		if (!domNode) {
-			return;
-		}
-
 		const windowWidth = window.innerWidth;
 		const windowHeight = window.innerHeight;
 
 		const width = windowWidth * .4;
 		const height = Math.min(.4 * windowHeight, this._editorWidget.getContentHeight());
 		this._editorWidget.layout({ width, height });
 		const top = Math.round((windowHeight - height) / 2);
-		domNode.style.top = `${top}px`;
+		this._editorContainer.style.top = `${top}px`;
 		const left = Math.round((windowWidth - width) / 2);
-		domNode.style.left = `${left}px`;
+		this._editorContainer.style.left = `${left}px`;
 	}
 
 	private async _getTextModel(resource: URI): Promise<ITextModel | null> {

src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.css

@@ -3,12 +3,10 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-editor .accessibilityHelpWidget {
-	padding: 10px;
-	vertical-align: middle;
-	overflow: auto;
+.accessible-view {
+	position: relative;
 	background-color: var(--vscode-editorWidget-background);
 	color: var(--vscode-editorWidget-foreground);
 	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-	border: 2px solid var(--vscode-contrastBorder);
+	border: 2px solid var(--vscode-contrastActiveBorder);
 }