fix for https://github.com/microsoft/azuredatastudio/issues/6729 (#6863)

Tables in Extensions need a way to override tab so that tabbing in table cells is not possible and tabbing takes control out of Table - this is the accessibility requirement for tables not having actionable cells. Keeping it as a switch so that we can continue having older behavior where needed.

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

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 {

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<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onSelectedRowChanged);
 		return emitter && emitter.event;

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();
+						(<HTMLElement>(<HTMLElement>this._inputContainer.nativeElement).previousElementSibling).focus();
+
+					} else if (event.equals(KeyCode.Tab)) {
+						e.stopImmediatePropagation();
+						(<HTMLElement>(<HTMLElement>this._inputContainer.nativeElement).nextElementSibling).focus();
+					}
+				}
+			});
 		}
 	}
 
@@ -313,4 +329,12 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	public get ariaColumnCount(): number {
 		return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaColumnCount, -1);
 	}
+
+	public set moveFocusOutWithTab(newValue: boolean) {
+		this.setPropertyFromUI<azdata.TableComponentProperties, boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
+	}
+
+	public get moveFocusOutWithTab(): boolean {
+		return this.getPropertyOrDefault<azdata.TableComponentProperties, boolean>((props) => props.moveFocusOutWithTab, false);
+	}
 }