Adding screen reader optimized mode to slickgrid (#21069)

src/sql/workbench/services/insights/browser/insightsDialogView.ts

@@ -51,6 +51,7 @@ import { IInsightsConfigDetails } from 'sql/platform/extensions/common/extension
 import { attachButtonStyler } from 'vs/platform/theme/common/styler';
 import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
+import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 
 const labelDisplay = nls.localize("insights.item", "Item");
 const valueDisplay = nls.localize("insights.value", "Value");
@@ -87,12 +88,13 @@ class InsightTableView extends ViewPane {
 		@IOpenerService openerService: IOpenerService,
 		@IThemeService themeService: IThemeService,
 		@ITelemetryService telemetryService: ITelemetryService,
+		@IAccessibilityService private _accessibilityService: IAccessibilityService
 	) {
 		super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService);
 	}
 
 	protected override renderBody(container: HTMLElement): void {
-		this._table = new Table(container, {
+		this._table = new Table(container, this._accessibilityService, {
 			columns: this.columns,
 			dataProvider: this.data
 		}, this.tableOptions);

src/sql/workbench/services/notebook/browser/outputs/mimemodel.ts

@@ -5,6 +5,7 @@
 
 import { IRenderMime } from 'sql/workbench/services/notebook/browser/outputs/renderMimeInterfaces';
 import { ReadonlyJSONObject } from 'sql/workbench/services/notebook/common/jsonext';
+import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
@@ -20,6 +21,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		this._metadata = options.metadata || {};
 		this._callback = options.callback;
 		this._themeService = options.themeService;
+		this._accessibilityService = options.accessibilityService;
 	}
 
 	/**
@@ -45,6 +47,10 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		return this._themeService;
 	}
 
+	get accessibilityService(): IAccessibilityService {
+		return this._accessibilityService;
+	}
+
 	/**
 	 * Set the data associated with the model.
 	 *
@@ -62,6 +68,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 	private _data: ReadonlyJSONObject;
 	private _metadata: ReadonlyJSONObject;
 	private _themeService: IThemeService;
+	private _accessibilityService: IAccessibilityService;
 }
 
 /**
@@ -96,5 +103,7 @@ export namespace MimeModel {
 		 * Theme service used to react to theme change events
 		 */
 		themeService?: IThemeService;
+
+		accessibilityService?: IAccessibilityService;
 	}
 }

src/sql/workbench/services/notebook/browser/outputs/renderMimeInterfaces.ts

@@ -4,6 +4,7 @@
 |----------------------------------------------------------------------------*/
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ReadonlyJSONObject } from 'sql/workbench/services/notebook/common/jsonext';
+import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 
 /**
  * A namespace for rendermime associated interfaces.
@@ -42,6 +43,8 @@ export namespace IRenderMime {
 		 * Theme service used to react to theme change events
 		 */
 		readonly themeService: IThemeService;
+
+		readonly accessibilityService: IAccessibilityService;
 	}
 
 	/**

src/sql/workbench/services/notebook/browser/outputs/tableRenderers.ts

@@ -16,6 +16,7 @@ import { AutoColumnSize } from 'sql/base/browser/ui/table/plugins/autoSizeColumn
 import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additionalKeyBindings.plugin';
 import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
 import { values } from 'vs/base/common/collections';
+import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 
 /**
  * Render DataResource as a grid into a host node.
@@ -55,7 +56,7 @@ export function renderDataResource(
 	let transformedData = transformData(sourceObject.data, columnsTransformed);
 	tableResultsData.push(transformedData);
 
-	let detailTable = new Table(tableContainer, {
+	let detailTable = new Table(tableContainer, options.accessibilityService, {
 		dataProvider: tableResultsData, columns: columnsTransformed
 	}, {
 		rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
@@ -135,5 +136,10 @@ export namespace renderDataResource {
 		 * Theme service used to react to theme change events
 		 */
 		themeService?: IThemeService;
+
+		/**
+		 * Accessibility service used to get screen reader optimization flag state
+		 */
+		accessibilityService: IAccessibilityService;
 	}
 }

src/sql/workbench/services/notebook/browser/outputs/widgets.ts

@@ -401,7 +401,8 @@ export class RenderedDataResource extends RenderedCommon {
 		return tableRenderers.renderDataResource({
 			host: this.node,
 			source: JSON.stringify(model.data[this.mimeType]),
-			themeService: model.themeService
+			themeService: model.themeService,
+			accessibilityService: model.accessibilityService
 		});
 	}
 }

src/sql/workbench/services/restore/browser/restoreDialog.ts

@@ -48,6 +48,7 @@ import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'
 import { IBackupRestoreUrlBrowserDialogService } from 'sql/workbench/services/backupRestoreUrlBrowser/common/urlBrowserDialogService';
 import { MediaDeviceType } from 'sql/workbench/contrib/backup/common/constants';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
+import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 
 interface FileListElement {
 	logicalFileName: string;
@@ -157,7 +158,8 @@ export class RestoreDialog extends Modal {
 		@IBackupRestoreUrlBrowserDialogService private backupRestoreUrlBrowserDialogService: IBackupRestoreUrlBrowserDialogService,
 		@IClipboardService clipboardService: IClipboardService,
 		@ILogService logService: ILogService,
-		@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService
+		@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService,
+		@IAccessibilityService private _accessibilityService: IAccessibilityService
 	) {
 		super(localize('RestoreDialogTitle', "Restore database"), TelemetryKeys.ModalDialogName.Restore, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasErrors: true, width: 'wide', hasSpinner: true });
 		// view model
@@ -308,7 +310,7 @@ export class RestoreDialog extends Modal {
 		this._restorePlanTableContainer = DOM.append(restorePlanElement, DOM.$('.dialog-input-section.restore-list'));
 		DOM.hide(this._restorePlanTableContainer);
 		this._restorePlanData = new TableDataView<Slick.SlickData>();
-		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer,
+		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService,
 			{ dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }));
 		this._restorePlanTable.setTableTitle(localize('restorePlan', "Restore plan"));
 		this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false }));
@@ -359,7 +361,7 @@ export class RestoreDialog extends Modal {
 			field: 'restoreAs'
 		}];
 		this._fileListData = new TableDataView<FileListElement>();
-		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer,
+		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService,
 			{ dataProvider: this._fileListData, columns }, { enableColumnReorder: false }));
 		this._fileListTable.setSelectionModel(new RowSelectionModel());