add tab navigation option for slickgrid (#21947)

* profiler a11y bug fixes

* add new option

* replace old implementation

* update slickgrid
This commit is contained in:
Alan Ren
2023-02-15 21:37:01 -08:00
committed by GitHub
parent 8690c350d2
commit 32c7a4aeec
10 changed files with 26 additions and 31 deletions

View File

@@ -21,8 +21,6 @@ import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/bas
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
import { ActionOnCheck, CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin';
import { Emitter, Event as vsEvent } from 'vs/base/common/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
import { slickGridDataItemColumnValueWithNoData, textFormatter, iconCssFormatter, CssIconCellValue } from 'sql/base/browser/ui/table/formatters';
import { isUndefinedOrNull } from 'vs/base/common/types';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
@@ -276,7 +274,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
enableColumnReorder: false,
enableCellNavigation: true,
forceFitColumns: true, // default to true during init, actual value will be updated when setProperties() is called
dataItemColumnValueExtractor: slickGridDataItemColumnValueWithNoData // must change formatter if you are changing explicit column value extractor
dataItemColumnValueExtractor: slickGridDataItemColumnValueWithNoData, // must change formatter if you are changing explicit column value extractor,
enableInGridTabNavigation: this.moveFocusOutWithTab
};
this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
@@ -295,20 +294,6 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
args: e
});
}));
this._table.grid.onKeyDown.subscribe((e: DOMEvent) => {
if (this.moveFocusOutWithTab) {
let event = new StandardKeyboardEvent(e as KeyboardEvent);
if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
e.stopImmediatePropagation();
(<HTMLElement>(<HTMLElement>this._inputContainer.nativeElement).previousElementSibling).focus();
} else if (event.equals(KeyCode.Tab)) {
e.stopImmediatePropagation();
(<HTMLElement>(<HTMLElement>this._inputContainer.nativeElement).nextElementSibling).focus();
}
}
});
}
this.baseInit();
}

View File

@@ -408,7 +408,8 @@ export class ProfilerEditor extends EditorPane {
]
}, {
forceFitColumns: true,
dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor
dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor,
enableInGridTabNavigation: false
});
this._detailTableData.onRowCountChange(() => {

View File

@@ -96,7 +96,11 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
}
}
}, {
dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor
dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor,
// The details component in profiler UI is refreshed based on the selected row in this table.
// If in grid tab navigation is enabled, keyboard-only users will never be able to reach the details component
// when a particular row is selected.
enableInGridTabNavigation: false
});
this._profilerTable.setSelectionModel(new RowSelectionModel());
const copyKeybind = new CopyKeybind();