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

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