diff --git a/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts b/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts index 4cce0aa379..0194e53e83 100644 --- a/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts +++ b/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts @@ -130,7 +130,8 @@ export class DacFxSummaryPage extends BasePage { cssClass: 'align-with-header' }], width: 700, - height: 200 + height: 200, + moveFocusOutWithTab: true }); } } diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts index 4125524979..26522d14a5 100644 --- a/src/sql/azdata.d.ts +++ b/src/sql/azdata.d.ts @@ -2943,6 +2943,7 @@ declare module 'azdata' { title?: string; ariaRowCount?: number; ariaColumnCount?: number; + moveFocusOutWithTab?: boolean; //accessibility requirement for tables with no actionable cells } export interface FileBrowserTreeProperties extends ComponentProperties { diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index a49ff4a3a3..f4dab4a4f1 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -1146,6 +1146,13 @@ class TableComponentWrapper extends ComponentWrapper implements azdata.TableComp this.setProperty('title', v); } + public get moveFocusOutWithTab(): boolean { + return this.properties['moveFocusOutWithTab']; + } + public set moveFocusOutWithTab(v: boolean) { + this.setProperty('moveFocusOutWithTab', v); + } + public get onRowSelected(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onSelectedRowChanged); return emitter && emitter.event; diff --git a/src/sql/workbench/browser/modelComponents/table.component.ts b/src/sql/workbench/browser/modelComponents/table.component.ts index 459aee93e8..475afba560 100644 --- a/src/sql/workbench/browser/modelComponents/table.component.ts +++ b/src/sql/workbench/browser/modelComponents/table.component.ts @@ -23,6 +23,8 @@ import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/do import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin'; import { 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'; @Component({ selector: 'modelview-table', @@ -136,6 +138,20 @@ export default class TableComponent extends ComponentBase implements IComponent, args: e }); })); + + this._table.grid.onKeyDown.subscribe((e: KeyboardEvent) => { + if (this.moveFocusOutWithTab) { + let event = new StandardKeyboardEvent(e); + if (event.equals(KeyMod.Shift | KeyCode.Tab)) { + e.stopImmediatePropagation(); + ((this._inputContainer.nativeElement).previousElementSibling).focus(); + + } else if (event.equals(KeyCode.Tab)) { + e.stopImmediatePropagation(); + ((this._inputContainer.nativeElement).nextElementSibling).focus(); + } + } + }); } } @@ -313,4 +329,12 @@ export default class TableComponent extends ComponentBase implements IComponent, public get ariaColumnCount(): number { return this.getPropertyOrDefault((props) => props.ariaColumnCount, -1); } + + public set moveFocusOutWithTab(newValue: boolean) { + this.setPropertyFromUI((props, value) => props.moveFocusOutWithTab = value, newValue); + } + + public get moveFocusOutWithTab(): boolean { + return this.getPropertyOrDefault((props) => props.moveFocusOutWithTab, false); + } }