Adding screen reader optimized mode to slickgrid (#21069)

This commit is contained in:
Aasim Khan
2022-11-02 15:11:16 -07:00
committed by GitHub
parent f6dbe7539c
commit 4823a76833
41 changed files with 165 additions and 73 deletions

View File

@@ -53,6 +53,7 @@ import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectio
import { listFocusAndSelectionBackground } from 'sql/platform/theme/common/colors';
import { timeout } from 'vs/base/common/async';
import { onUnexpectedError } from 'vs/base/common/errors';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export interface IDesignerStyle {
tabbedPanelStyles?: ITabbedPanelStyles;
@@ -113,7 +114,8 @@ export class Designer extends Disposable implements IThemable {
@INotificationService private readonly _notificationService: INotificationService,
@IDialogService private readonly _dialogService: IDialogService,
@IThemeService private readonly _themeService: IThemeService,
@IContextMenuService private readonly _contextMenuService: IContextMenuService,) {
@IContextMenuService private readonly _contextMenuService: IContextMenuService,
@IAccessibilityService private readonly _accessibilityService: IAccessibilityService) {
super();
this._tableCellEditorFactory = new TableCellEditorFactory(
{
@@ -843,7 +845,7 @@ export class Designer extends Disposable implements IThemable {
const tableProperties = componentDefinition.componentProperties as DesignerTableProperties;
const taskbar = this.addTableTaskbar(container, tableProperties);
const tableContainer = container.appendChild(DOM.$('.full-row'));
const table = new Table(tableContainer, {
const table = new Table(tableContainer, this._accessibilityService, {
dataProvider: new TableDataView()
}, {
editable: true,

View File

@@ -39,6 +39,7 @@ import { ContextMenuColumn, ContextMenuCellValue } from 'sql/base/browser/ui/tab
import { IAction, Separator } from 'vs/base/common/actions';
import { MenuItemAction, MenuRegistry } from 'vs/platform/actions/common/actions';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export enum ColumnSizingMode {
ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -90,7 +91,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
@Inject(ILogService) logService: ILogService,
@Inject(IContextViewService) private contextViewService: IContextViewService,
@Inject(IContextMenuService) private contextMenuService: IContextMenuService,
@Inject(IInstantiationService) private instantiationService: IInstantiationService
@Inject(IInstantiationService) private instantiationService: IInstantiationService,
@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService
) {
super(changeRef, el, logService);
}
@@ -275,7 +277,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
dataItemColumnValueExtractor: slickGridDataItemColumnValueWithNoData // must change formatter if you are changing explicit column value extractor
};
this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, { dataProvider: this._tableData, columns: this._tableColumns }, options);
this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
this._table.setData(this._tableData);
this._table.setSelectionModel(new RowSelectionModel({ selectActiveRow: true }));

View File

@@ -48,6 +48,7 @@ import { ConnectionManagementInfo } from 'sql/platform/connection/common/connect
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
import { DASHBOARD_BORDER } from 'sql/workbench/common/theme';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component';
export const ROW_HEIGHT: number = 25;
@@ -144,7 +145,8 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
@Inject(IDashboardService) _dashboardService: IDashboardService,
@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService,
@Inject(ILogService) protected _logService: ILogService,
@Inject(IContextViewService) private _contextViewService: IContextViewService
@Inject(IContextViewService) private _contextViewService: IContextViewService,
@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
) {
super();
let self = this;
@@ -352,7 +354,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
this.initActionBar(databaseInvokeAsmt, databaseSelectAsmt);
}
this._table = this._register(new Table(this._gridEl.nativeElement, { columns }, options));
this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, options));
this._table.grid.setData(this.dataView, true);
this._table.registerPlugin(<any>this.rowDetail);
this._table.registerPlugin(filterPlugin);

View File

@@ -14,6 +14,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IInsightOptions, InsightType } from 'sql/workbench/contrib/charts/common/interfaces';
import { IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export class TableInsight extends Disposable implements IInsight {
public static readonly types = [InsightType.Table];
@@ -25,7 +26,8 @@ export class TableInsight extends Disposable implements IInsight {
public options: IInsightOptions = { type: InsightType.Table };
constructor(container: HTMLElement, options: any,
@IThemeService themeService: IThemeService
@IThemeService themeService: IThemeService,
@IAccessibilityService accessibilityService: IAccessibilityService
) {
super();
let tableContainer = $('div');
@@ -33,7 +35,7 @@ export class TableInsight extends Disposable implements IInsight {
tableContainer.style.height = '100%';
container.appendChild(tableContainer);
this.dataView = new TableDataView();
this.table = new Table(tableContainer, { dataProvider: this.dataView }, { showRowNumber: true });
this.table = new Table(tableContainer, accessibilityService, { dataProvider: this.dataView }, { showRowNumber: true });
this.table.setSelectionModel(new CellSelectionModel());
this._register(attachTableStyler(this.table, themeService));
}

View File

@@ -26,6 +26,7 @@ import { IAction } from 'vs/base/common/actions';
import { onUnexpectedError } from 'vs/base/common/errors';
import { Disposable } from 'vs/base/common/lifecycle';
import * as nls from 'vs/nls';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
import { IMenuService, MenuId } from 'vs/platform/actions/common/actions';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -63,7 +64,8 @@ export class ExplorerTable extends Disposable {
private readonly contextKeyService: IContextKeyService,
private readonly progressService: IEditorProgressService,
private readonly logService: ILogService,
private readonly dashboardService: IDashboardService) {
private readonly dashboardService: IDashboardService,
readonly accessibilityService: IAccessibilityService) {
super();
this._explorerView = new ExplorerView(this.context);
const connectionInfo = this.bootStrapService.connectionManagementService.connectionInfo;
@@ -72,7 +74,7 @@ export class ExplorerTable extends Disposable {
this._view = new TableDataView<Slick.SlickData>(undefined, undefined, undefined, (data: Slick.SlickData[]): Slick.SlickData[] => {
return explorerFilter.filter(this._filterStr, data);
});
this._table = new Table<Slick.SlickData>(parentElement, { dataProvider: this._view }, { forceFitColumns: true });
this._table = new Table<Slick.SlickData>(parentElement, accessibilityService, { dataProvider: this._view }, { forceFitColumns: true });
this._table.setSelectionModel(new RowSelectionModel());
this._actionsColumn = new ButtonColumn<Slick.SlickData>({
id: 'actions',

View File

@@ -31,6 +31,7 @@ import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { getFlavor } from 'sql/workbench/contrib/dashboard/browser/dashboardRegistry';
import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
@Component({
selector: 'explorer-widget',
@@ -60,6 +61,7 @@ export class ExplorerWidget extends DashboardWidget implements IDashboardWidget,
@Inject(IConnectionManagementService) private readonly connectionManagementService: IConnectionManagementService,
@Inject(ICapabilitiesService) private readonly capabilitiesService: ICapabilitiesService,
@Inject(IDashboardService) private readonly dashboardService: IDashboardService,
@Inject(IAccessibilityService) private readonly accessibilityService: IAccessibilityService,
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef
) {
super(changeRef);
@@ -92,7 +94,8 @@ export class ExplorerWidget extends DashboardWidget implements IDashboardWidget,
this.contextKeyService,
this.progressService,
this.logService,
this.dashboardService);
this.dashboardService,
this.accessibilityService);
this._register(this._input);
this._register(attachInputBoxStyler(this._input, this.themeService));
this._register(this._table);

View File

@@ -14,6 +14,7 @@ import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { CellSelectionModel } from 'sql/base/browser/ui/table/plugins/cellSelectionModel.plugin';
import { IInsightsView, IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
@Component({
template: ''
@@ -25,7 +26,8 @@ export default class TableInsight extends Disposable implements IInsightsView, O
constructor(
@Inject(forwardRef(() => ElementRef)) private _elementRef: ElementRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService
) {
super();
}
@@ -61,7 +63,7 @@ export default class TableInsight extends Disposable implements IInsightsView, O
private createTable() {
if (!this.table) {
this.table = new Table(this._elementRef.nativeElement, { dataProvider: this.dataView, columns: this.columns }, { showRowNumber: true });
this.table = new Table(this._elementRef.nativeElement, this.accessibilityService, { dataProvider: this.dataView, columns: this.columns }, { showRowNumber: true });
this.table.setSelectionModel(new CellSelectionModel());
this._register(attachTableStyler(this.table, this.themeService));
}

View File

@@ -35,6 +35,7 @@ import { Event } from 'vs/base/common/event';
import { equals } from 'vs/base/common/arrays';
import * as DOM from 'vs/base/browser/dom';
import { onUnexpectedError } from 'vs/base/common/errors';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export class EditDataGridPanel extends GridParentComponent {
// The time(in milliseconds) we wait before refreshing the grid.
@@ -105,7 +106,8 @@ export class EditDataGridPanel extends GridParentComponent {
@IConfigurationService configurationService: IConfigurationService,
@IClipboardService clipboardService: IClipboardService,
@IQueryEditorService queryEditorService: IQueryEditorService,
@ILogService logService: ILogService
@ILogService logService: ILogService,
@IAccessibilityService private accessibilityService: IAccessibilityService
) {
super(contextMenuService, keybindingService, contextKeyService, configurationService, clipboardService, queryEditorService, logService);
this.nativeElement = document.createElement('div');
@@ -893,7 +895,7 @@ export class EditDataGridPanel extends GridParentComponent {
};
if (dataSet.columnDefinitions) {
this.table = new Table(this.nativeElement.appendChild(newGridContainer), { dataProvider: this.gridDataProvider, columns: dataSet.columnDefinitions }, options);
this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, { dataProvider: this.gridDataProvider, columns: dataSet.columnDefinitions }, options);
for (let plugin of this.plugins) {
this.table.registerPlugin(plugin);
}
@@ -903,7 +905,7 @@ export class EditDataGridPanel extends GridParentComponent {
}
}
else {
this.table = new Table(this.nativeElement.appendChild(newGridContainer));
this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService);
}
}

View File

@@ -18,6 +18,7 @@ import { IContextMenuService, IContextViewService } from 'vs/platform/contextvie
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { Codicon } from 'vs/base/common/codicons';
import { deepClone } from 'vs/base/common/objects';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export enum ExecutionPlanCompareOrientation {
Horizontal = 'horizontal',
@@ -62,9 +63,10 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
@IThemeService themeService: IThemeService,
@IInstantiationService instantiationService: IInstantiationService,
@IContextMenuService contextMenuService: IContextMenuService,
@IContextViewService contextViewService: IContextViewService
@IContextViewService contextViewService: IContextViewService,
@IAccessibilityService accessibilityService: IAccessibilityService
) {
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService);
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService);
this._model = <ExecutionPlanComparisonPropertiesViewModel>{};
this._parentContainer.style.display = 'none';
const header = DOM.$('.compare-operation-name');

View File

@@ -13,6 +13,7 @@ import { textFormatter } from 'sql/base/browser/ui/table/formatters';
import { ExecutionPlanPropertiesViewBase, PropertiesSortType } from 'sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase';
import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase {
// Div that holds the name of the element selected
@@ -24,9 +25,10 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
@IThemeService themeService: IThemeService,
@IInstantiationService instantiationService: IInstantiationService,
@IContextMenuService contextMenuService: IContextMenuService,
@IContextViewService contextViewService: IContextViewService
@IContextViewService contextViewService: IContextViewService,
@IAccessibilityService accessibilityService: IAccessibilityService
) {
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService);
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService);
this._model = <ExecutionPlanPropertiesView>{};
this._operationName = DOM.$('h3');
this._operationName.classList.add('operation-name');

View File

@@ -25,6 +25,7 @@ import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugi
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { deepClone } from 'vs/base/common/objects';
import { Disposable } from 'vs/base/common/lifecycle';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export abstract class ExecutionPlanPropertiesViewBase extends Disposable implements IVerticalSashLayoutProvider {
// Title bar with close button action
@@ -67,7 +68,8 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
private _themeService: IThemeService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IContextViewService private _contextViewService: IContextViewService
@IContextViewService private _contextViewService: IContextViewService,
@IAccessibilityService accessibilityService: IAccessibilityService
) {
super();
const sashContainer = DOM.$('.properties-sash');
@@ -155,7 +157,7 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
this._selectionModel = new CellSelectionModel<Slick.SlickData>();
this._tableComponent = this._register(new TreeGrid(table, {
this._tableComponent = this._register(new TreeGrid(table, accessibilityService, {
columns: []
}, {
rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,

View File

@@ -24,6 +24,7 @@ import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/bro
import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugin';
import { Disposable } from 'vs/base/common/lifecycle';
import { deepClone } from 'vs/base/common/objects';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export class ExecutionPlanTreeTab extends Disposable implements IPanelTab {
public readonly title: string = localize('planTreeTab.title', 'Plan Tree');
@@ -51,7 +52,8 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
constructor(
@IThemeService private _themeService: IThemeService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService
@IContextMenuService private _contextMenuService: IContextMenuService,
@IAccessibilityService private accessibilityService: IAccessibilityService
) {
super();
}
@@ -192,7 +194,7 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
const selectionModel = new CellSelectionModel<Slick.SlickData>();
const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, {
const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this.accessibilityService, {
columns: columns,
sorter: (args) => {
const sortColumn = args.sortCol.field;

View File

@@ -30,6 +30,7 @@ import { ITableKeyboardEvent } from 'sql/base/browser/ui/table/interfaces';
import { Disposable } from 'vs/base/common/lifecycle';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { filterIconClassNames, searchPlaceholder, topOperationsSearchDescription } from 'sql/workbench/contrib/executionPlan/browser/constants';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
const TABLE_SORT_COLUMN_KEY = 'tableCostColumnForSorting';
@@ -61,7 +62,8 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
@IThemeService private _themeService: IThemeService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IContextViewService private _contextViewService: IContextViewService
@IContextViewService private _contextViewService: IContextViewService,
@IAccessibilityService private _accessibilityService: IAccessibilityService
) {
super();
}
@@ -236,7 +238,7 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
const selectionModel = new CellSelectionModel<Slick.SlickData>({ hasRowSelector: true });
const table = this._register(new Table<Slick.SlickData>(tableContainer, {
const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, {
columns: columns,
sorter: (args) => {
const column = args.sortCol.field;

View File

@@ -24,6 +24,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
import { AlertsCacheObject } from 'sql/workbench/services/jobManagement/common/jobManagementService';
import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export const VIEW_SELECTOR: string = 'jobalertsview-component';
export const ROW_HEIGHT: number = 45;
@@ -76,7 +77,8 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
@Inject(IContextMenuService) contextMenuService: IContextMenuService,
@Inject(IKeybindingService) keybindingService: IKeybindingService,
@Inject(IDashboardService) _dashboardService: IDashboardService) {
@Inject(IDashboardService) _dashboardService: IDashboardService,
@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
this._didTabChange = false;
this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
@@ -143,7 +145,7 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
jQuery(this.actionBarContainer.nativeElement).empty();
this.initActionBar();
this._table = new Table(this._gridEl.nativeElement, { columns }, this.options);
this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, this.options);
this._table.grid.setData(this.dataView, true);
this._register(this._table.onContextMenu(e => {
self.openContextMenu(e);

View File

@@ -34,6 +34,7 @@ import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { onUnexpectedError } from 'vs/base/common/errors';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
export const ROW_HEIGHT: number = 45;
@@ -108,7 +109,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
@Inject(IKeybindingService) keybindingService: IKeybindingService,
@Inject(IDashboardService) _dashboardService: IDashboardService,
@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService,
@Inject(IContextViewService) private _contextViewService: IContextViewService
@Inject(IContextViewService) private _contextViewService: IContextViewService,
@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
let jobCacheObjectMap = this._jobManagementService.jobCacheObjectMap;
@@ -188,7 +190,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
jQuery(this._gridEl.nativeElement).empty();
jQuery(this.actionBarContainer.nativeElement).empty();
this.initActionBar();
this._table = new Table(this._gridEl.nativeElement, { columns }, options);
this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, options);
this._table.grid.setData(this.dataView, true);
this._table.grid.onClick.subscribe((e, args) => {
let job = self.getJob(args);

View File

@@ -35,6 +35,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component';
@@ -108,7 +109,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
@Inject(IDashboardService) _dashboardService: IDashboardService,
@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService,
@Inject(IContextViewService) private _contextViewService: IContextViewService,
@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
let notebookCacheObjectMap = this._jobManagementService.notebookCacheObjectMap;
@@ -188,7 +189,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
jQuery(this._gridEl.nativeElement).empty();
jQuery(this.actionBarContainer.nativeElement).empty();
this.initActionBar();
this._table = this._register(new Table(this._gridEl.nativeElement, { columns }, options));
this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, options));
this._table.grid.setData(this.dataView, true);
this._table.grid.onClick.subscribe((e, args) => {
let notebook = self.getNotebook(args);

View File

@@ -24,6 +24,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
import { OperatorsCacheObject } from 'sql/workbench/services/jobManagement/common/jobManagementService';
import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export const VIEW_SELECTOR: string = 'joboperatorsview-component';
export const ROW_HEIGHT: number = 45;
@@ -75,7 +76,8 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
@Inject(IContextMenuService) contextMenuService: IContextMenuService,
@Inject(IKeybindingService) keybindingService: IKeybindingService,
@Inject(IDashboardService) _dashboardService: IDashboardService
@Inject(IDashboardService) _dashboardService: IDashboardService,
@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
@@ -143,7 +145,7 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
jQuery(this._gridEl.nativeElement).empty();
jQuery(this.actionBarContainer.nativeElement).empty();
this.initActionBar();
this._table = new Table(this._gridEl.nativeElement, { columns }, this.options);
this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, this.options);
this._table.grid.setData(this.dataView, true);
this._register(this._table.onContextMenu(e => {

View File

@@ -24,6 +24,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
import { ProxiesCacheObject } from 'sql/workbench/services/jobManagement/common/jobManagementService';
import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export const VIEW_SELECTOR: string = 'jobproxiesview-component';
export const ROW_HEIGHT: number = 45;
@@ -76,7 +77,8 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
@Inject(IContextMenuService) contextMenuService: IContextMenuService,
@Inject(IKeybindingService) keybindingService: IKeybindingService,
@Inject(IDashboardService) _dashboardService: IDashboardService
@Inject(IDashboardService) _dashboardService: IDashboardService,
@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
@@ -143,7 +145,7 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
jQuery(this._gridEl.nativeElement).empty();
jQuery(this.actionBarContainer.nativeElement).empty();
this.initActionBar();
this._table = new Table(this._gridEl.nativeElement, { columns }, this.options);
this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, this.options);
this._table.grid.setData(this.dataView, true);
this._register(this._table.onContextMenu(e => {

View File

@@ -73,6 +73,7 @@ export function getBundleOptions(options: IOutputModelOptions): MimeModel.IOptio
let data = getData(options.value);
let metadata = getMetadata(options.value);
let trusted = !!options.trusted;
return { data, metadata, trusted };
}

View File

@@ -49,6 +49,7 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IExecutionPlanService } from 'sql/workbench/services/executionPlan/common/interfaces';
import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
import { mssqlProviderName } from 'sql/platform/connection/common/constants';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
@Component({
selector: GridOutputComponent.SELECTOR,
@@ -240,12 +241,13 @@ class DataResourceTable extends GridTableBase<any> {
@IThemeService themeService: IThemeService,
@IContextViewService contextViewService: IContextViewService,
@INotificationService notificationService: INotificationService,
@IExecutionPlanService executionPlanService: IExecutionPlanService
@IExecutionPlanService executionPlanService: IExecutionPlanService,
@IAccessibilityService accessibilityService: IAccessibilityService,
) {
super(state, createResultSet(source), {
actionOrientation: ActionsOrientation.HORIZONTAL,
inMemoryDataProcessing: true
}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService);
}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService);
this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.cellModel);
this._chart = this.instantiationService.createInstance(ChartView, false);

View File

@@ -54,6 +54,7 @@ import { IEditorOptions } from 'vs/platform/editor/common/editor';
import { IEditorGroup, IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
import { IModelService } from 'vs/editor/common/services/model';
import { CommonFindController, FindStartFocusAction } from 'vs/editor/contrib/find/browser/findController';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
class BasicView implements IView {
public get element(): HTMLElement {
@@ -171,7 +172,8 @@ export class ProfilerEditor extends EditorPane {
@IStorageService storageService: IStorageService,
@IClipboardService private _clipboardService: IClipboardService,
@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
@IEditorGroupsService editorGroupsService: IEditorGroupsService
@IEditorGroupsService editorGroupsService: IEditorGroupsService,
@IAccessibilityService private readonly _accessibilityService: IAccessibilityService
) {
super(ProfilerEditor.ID, telemetryService, themeService, storageService);
this._profilerEditorContextKey = CONTEXT_PROFILER_EDITOR.bindTo(this._contextKeyService);
@@ -387,7 +389,7 @@ export class ProfilerEditor extends EditorPane {
detailTableContainer.style.width = '100%';
detailTableContainer.style.height = '100%';
this._detailTableData = new TableDataView<IDetailData>();
this._detailTable = new Table(detailTableContainer, {
this._detailTable = new Table(detailTableContainer, this._accessibilityService, {
dataProvider: this._detailTableData, columns: [
{
id: 'label',

View File

@@ -33,6 +33,7 @@ import { IClipboardService } from 'sql/platform/clipboard/common/clipboardServic
import { handleCopyRequest } from 'sql/workbench/contrib/profiler/browser/profilerCopyHandler';
import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/browser/findState';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export interface ProfilerTableViewState {
scrollTop: number;
@@ -68,7 +69,8 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
@IStorageService storageService: IStorageService,
@IStatusbarService private _statusbarService: IStatusbarService,
@IClipboardService private _clipboardService: IClipboardService,
@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService
@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
@IAccessibilityService private readonly _accessibilityService: IAccessibilityService
) {
super(ProfilerTableEditor.ID, telemetryService, _themeService, storageService);
this._actionMap[ACTION_IDS.FIND_NEXT] = this._instantiationService.createInstance(ProfilerFindNext, this);
@@ -84,7 +86,7 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
this._overlay.style.zIndex = '4';
parent.appendChild(this._overlay);
this._profilerTable = new Table(parent, {
this._profilerTable = new Table(parent, this._accessibilityService, {
sorter: (args) => {
let input = this.input as ProfilerInput;
if (input && input.data) {

View File

@@ -54,6 +54,7 @@ import { IExecutionPlanService } from 'sql/workbench/services/executionPlan/comm
import { ExecutionPlanInput } from 'sql/workbench/contrib/executionPlan/common/executionPlanInput';
import { CopyAction } from 'vs/editor/contrib/clipboard/browser/clipboard';
import { formatDocumentWithSelectedProvider, FormattingMode } from 'vs/editor/contrib/format/browser/format';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
const ROW_HEIGHT = 29;
const HEADER_HEIGHT = 26;
@@ -407,7 +408,8 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
@IThemeService private readonly themeService: IThemeService,
@IContextViewService private readonly contextViewService: IContextViewService,
@INotificationService private readonly notificationService: INotificationService,
@IExecutionPlanService private readonly executionPlanService: IExecutionPlanService
@IExecutionPlanService private readonly executionPlanService: IExecutionPlanService,
@IAccessibilityService private readonly accessibilityService: IAccessibilityService
) {
super();
@@ -522,7 +524,7 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
inMemoryDataProcessing: this.options.inMemoryDataProcessing,
inMemoryDataCountThreshold: this.options.inMemoryDataCountThreshold
});
this.table = this._register(new Table(this.tableContainer, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
this.table = this._register(new Table(this.tableContainer, this.accessibilityService, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
this.table.setTableTitle(localize('resultsGrid', "Results grid"));
this.table.setSelectionModel(this.selectionModel);
this.table.registerPlugin(new MouseWheelSupport());
@@ -921,14 +923,15 @@ class GridTable<T> extends GridTableBase<T> {
@IThemeService themeService: IThemeService,
@IContextViewService contextViewService: IContextViewService,
@INotificationService notificationService: INotificationService,
@IExecutionPlanService executionPlanService: IExecutionPlanService
@IExecutionPlanService executionPlanService: IExecutionPlanService,
@IAccessibilityService accessibilityService: IAccessibilityService
) {
super(state, resultSet, {
actionOrientation: ActionsOrientation.VERTICAL,
inMemoryDataProcessing: true,
showActionBar: true,
inMemoryDataCountThreshold: configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.inMemoryDataProcessingThreshold,
}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService);
}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService);
this._gridDataProvider = this.instantiationService.createInstance(QueryGridDataProvider, this._runner, resultSet.batchId, resultSet.id);
this.providerId = this._runner.getProviderId();
}

View File

@@ -25,6 +25,7 @@ import { Emitter } from 'vs/base/common/event';
import { ContextMenuAnchor } from 'sql/workbench/contrib/resourceViewer/browser/resourceViewerEditor';
import { LoadingSpinnerPlugin } from 'sql/base/browser/ui/table/plugins/loadingSpinner.plugin';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
export class ResourceViewerTable extends Disposable {
@@ -39,14 +40,15 @@ export class ResourceViewerTable extends Disposable {
@IOpenerService private _openerService: IOpenerService,
@ICommandService private _commandService: ICommandService,
@INotificationService private _notificationService: INotificationService,
@IContextViewService private _contextViewService: IContextViewService) {
@IContextViewService private _contextViewService: IContextViewService,
@IAccessibilityService private _accessibilityService: IAccessibilityService) {
super();
let filterFn = (data: Array<azdata.DataGridItem>): Array<azdata.DataGridItem> => {
return data.filter(item => this.filter(item));
};
this._dataView = new TableDataView<azdata.DataGridItem>(undefined, undefined, undefined, filterFn);
this._resourceViewerTable = this._register(new Table(parent, {
this._resourceViewerTable = this._register(new Table(parent, this._accessibilityService, {
sorter: (args) => {
this._dataView.sort(args);
}

View File

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

View File

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

View File

@@ -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;
}
/**

View File

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

View File

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

View File

@@ -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());

View File

@@ -19,7 +19,7 @@ suite('TableComponent Tests', () => {
['4', '5', '6']
];
let columns = ['c1', 'c2', 'c3'];
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined);
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [
@@ -39,7 +39,7 @@ suite('TableComponent Tests', () => {
test('Table transformData should return empty array given undefined rows', () => {
let data = undefined;
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined);
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
let columns = ['c1', 'c2', 'c3'];
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [];
@@ -52,7 +52,7 @@ suite('TableComponent Tests', () => {
['4', '5', '6']
];
let columns;
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined);
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [];
assert.deepStrictEqual(actual, expected);
@@ -63,7 +63,7 @@ suite('TableComponent Tests', () => {
['1', '2'],
['4', '5']
];
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined);
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
let columns = ['c1', 'c2', 'c3'];
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [