ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-22 17:22:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding screen reader optimized mode to slickgrid (#21069)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/sql/base/browser/ui/accessibility/accessibilityProvider.ts Normal file
View File

@@ -0,0 +1,8 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
export interface IAccessibilityProvider {
isScreenReaderOptimized(): boolean;
}

7
src/sql/base/browser/ui/table/table.ts
View File

@@ -20,6 +20,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { range } from 'vs/base/common/arrays';
import { AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
function getDefaultOptions<T>(): Slick.GridOptions<T> {
return <Slick.GridOptions<T>>{
@@ -65,7 +66,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
private _onBlur = new Emitter<void>();
public readonly onBlur = this._onBlur.event;
constructor(parent: HTMLElement, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
super();
if (!configuration || !configuration.dataProvider || isArray(configuration.dataProvider)) {
this._data = new TableDataView<T>(configuration && configuration.dataProvider as Array<T>);
@@ -77,6 +78,10 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
let newOptions = mixin(options || {}, getDefaultOptions<T>(), false);
if (accessibilityProvider?.isScreenReaderOptimized()) {
newOptions.disableColumnBasedCellVirtualization = true;
}
this._container = document.createElement('div');
this._container.className = 'monaco-table';
this._register(DOM.addDisposableListener(this._container, DOM.EventType.FOCUS, (e: FocusEvent) => {

5
src/sql/base/browser/ui/table/treeGrid.ts
View File

@@ -15,6 +15,7 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { createTreeGridExpandableColumnFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters';
import { escape } from 'sql/base/common/strings';
import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: FilterableColumn<T>[], cellValueGetter: CellValueGetter = defaultCellValueGetter): T[] {
let filteredData = defaultFilter(data, columns, cellValueGetter);
@@ -38,8 +39,8 @@ function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: Fi
* TreeGrid component displays a hierarchical table data grouped into expandable and collapsible nodes.
*/
export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
constructor(parent: HTMLElement, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
super(parent, configuration, options);
constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
super(parent, accessibilityProvider, configuration, options);
this._tableContainer.setAttribute('role', 'treegrid');
if (configuration?.dataProvider && configuration.dataProvider instanceof TableDataView) {
this._data = configuration.dataProvider;