Adding screen reader optimized mode to slickgrid (#21069)

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
 		});
 	}
 }