Merge pull request microsoft#205514 from microsoft/joh/awful-quelea

Show accessible diff viewer in line chat widget

Author: jrieken

src/vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer.css

@@ -3,66 +3,70 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-diff-editor .diff-review-line-number {
-	text-align: right;
-	display: inline-block;
-	color: var(--vscode-editorLineNumber-foreground);
+.monaco-component.diff-review {
+	user-select: none;
+	-webkit-user-select: none;
+	z-index: 99;
 }
 
 .monaco-diff-editor .diff-review {
 	position: absolute;
-	user-select: none;
-	-webkit-user-select: none;
-	z-index: 99;
+
+}
+
+.monaco-component.diff-review .diff-review-line-number {
+	text-align: right;
+	display: inline-block;
+	color: var(--vscode-editorLineNumber-foreground);
 }
 
-.monaco-diff-editor .diff-review-summary {
+.monaco-component.diff-review .diff-review-summary {
 	padding-left: 10px;
 }
 
-.monaco-diff-editor .diff-review-shadow {
+.monaco-component.diff-review .diff-review-shadow {
 	position: absolute;
 	box-shadow: var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset;
 }
 
-.monaco-diff-editor .diff-review-row {
+.monaco-component.diff-review .diff-review-row {
 	white-space: pre;
 }
 
-.monaco-diff-editor .diff-review-table {
+.monaco-component.diff-review .diff-review-table {
 	display: table;
 	min-width: 100%;
 }
 
-.monaco-diff-editor .diff-review-row {
+.monaco-component.diff-review .diff-review-row {
 	display: table-row;
 	width: 100%;
 }
 
-.monaco-diff-editor .diff-review-spacer {
+.monaco-component.diff-review .diff-review-spacer {
 	display: inline-block;
 	width: 10px;
 	vertical-align: middle;
 }
 
-.monaco-diff-editor .diff-review-spacer > .codicon {
+.monaco-component.diff-review .diff-review-spacer > .codicon {
 	font-size: 9px !important;
 }
 
-.monaco-diff-editor .diff-review-actions {
+.monaco-component.diff-review .diff-review-actions {
 	display: inline-block;
 	position: absolute;
 	right: 10px;
 	top: 2px;
 	z-index: 100;
 }
 
-.monaco-diff-editor .diff-review-actions .action-label {
+.monaco-component.diff-review .diff-review-actions .action-label {
 	width: 16px;
 	height: 16px;
 	margin: 2px 0;
 }
 
-.monaco-diff-editor .revertButton {
+.monaco-component.diff-review .revertButton {
 	cursor: pointer;
 }

src/vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer.ts

@@ -354,7 +354,7 @@ class View extends Disposable {
 		super();
 
 		this.domNode = this._element;
-		this.domNode.className = 'diff-review monaco-editor-background';
+		this.domNode.className = 'monaco-component diff-review monaco-editor-background';
 
 		const actionBarContainer = document.createElement('div');
 		actionBarContainer.className = 'diff-review-actions';
@@ -381,6 +381,12 @@ class View extends Disposable {
 		this._scrollbar = this._register(new DomScrollableElement(this._content, {}));
 		reset(this.domNode, this._scrollbar.getDomNode(), actionBarContainer);
 
+		this._register(autorun(r => {
+			this._height.read(r);
+			this._width.read(r);
+			this._scrollbar.scanDomNode();
+		}));
+
 		this._register(toDisposable(() => { reset(this.domNode); }));
 
 		this._register(applyStyle(this.domNode, { width: this._width, height: this._height }));

src/vs/workbench/contrib/inlineChat/browser/inlineChat.css

@@ -307,6 +307,7 @@
 	padding-top: 6px;
 }
 
+.monaco-editor .inline-chat .diff-review.hidden,
 .monaco-editor .inline-chat .previewDiff.hidden,
 .monaco-editor .inline-chat .previewCreate.hidden,
 .monaco-editor .inline-chat .previewCreateTitle.hidden {

src/vs/workbench/contrib/inlineChat/browser/inlineChatController.ts

@@ -27,7 +27,6 @@ import { ProviderResult, TextEdit } from 'vs/editor/common/languages';
 import { IEditorWorkerService } from 'vs/editor/common/services/editorWorker';
 import { InlineCompletionsController } from 'vs/editor/contrib/inlineCompletions/browser/inlineCompletionsController';
 import { localize } from 'vs/nls';
-import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
@@ -145,7 +144,6 @@ export class InlineChatController implements IEditorContribution {
 		@IConfigurationService private readonly _configurationService: IConfigurationService,
 		@IDialogService private readonly _dialogService: IDialogService,
 		@IContextKeyService contextKeyService: IContextKeyService,
-		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService,
 		@IChatAccessibilityService private readonly _chatAccessibilityService: IChatAccessibilityService,
 		@IChatAgentService private readonly _chatAgentService: IChatAgentService,
 		@IBulkEditService private readonly _bulkEditService: IBulkEditService,
@@ -235,13 +233,7 @@ export class InlineChatController implements IEditorContribution {
 	}
 
 	private _getMode(): EditMode {
-		const editMode = this._configurationService.inspect<EditMode>(InlineChatConfigKeys.Mode);
-		let editModeValue = editMode.value;
-		if (this._accessibilityService.isScreenReaderOptimized() && editModeValue === editMode.defaultValue) {
-			// By default, use preview mode for screen reader users
-			editModeValue = EditMode.Preview;
-		}
-		return editModeValue!;
+		return this._configurationService.getValue<EditMode>(InlineChatConfigKeys.Mode);
 	}
 
 	getWidgetPosition(): Position | undefined {

src/vs/workbench/contrib/inlineChat/browser/inlineChatStrategies.ts

@@ -36,6 +36,7 @@ import { HunkState } from './inlineChatSession';
 import { assertType } from 'vs/base/common/types';
 import { IModelService } from 'vs/editor/common/services/model';
 import { performAsyncTextEdit, asProgressiveEdit } from './utils';
+import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 
 export interface IEditObserver {
 	start(): void;
@@ -404,6 +405,8 @@ type HunkDisplayData = {
 	toggleDiff?: () => any;
 	remove(): void;
 	move: (next: boolean) => void;
+
+	hunk: HunkInformation;
 };
 
 
@@ -441,6 +444,7 @@ export class LiveStrategy extends EditModeStrategy {
 		zone: InlineChatZoneWidget,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IEditorWorkerService protected readonly _editorWorkerService: IEditorWorkerService,
+		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService,
 		@IInstantiationService protected readonly _instaService: IInstantiationService,
 	) {
 		super(session, editor, zone);
@@ -652,6 +656,7 @@ export class LiveStrategy extends EditModeStrategy {
 							: zoneLineNumber - hunkRanges[0].endLineNumber;
 
 						data = {
+							hunk: hunkData,
 							decorationIds,
 							viewZoneId: '',
 							viewZone: viewZoneData,
@@ -661,7 +666,7 @@ export class LiveStrategy extends EditModeStrategy {
 							discardHunk,
 							toggleDiff: !hunkData.isInsertion() ? toggleDiff : undefined,
 							remove,
-							move
+							move,
 						};
 
 						this._hunkDisplayData.set(hunkData, data);
@@ -700,6 +705,10 @@ export class LiveStrategy extends EditModeStrategy {
 				const remainingHunks = this._session.hunkData.pending;
 				this._updateSummaryMessage(remainingHunks);
 
+				if (this._accessibilityService.isScreenReaderOptimized()) {
+					this._zone.widget.showAccessibleHunk(this._session, widgetData.hunk);
+				}
+
 				this._ctxCurrentChangeHasDiff.set(Boolean(widgetData.toggleDiff));
 				this.toggleDiff = widgetData.toggleDiff;
 				this.acceptHunk = async () => widgetData!.acceptHunk();