Fix tabbing through Notebook cells (#9758)

* Fix tabbing through Notebook cells

* Fix toggle tab command and re-order DOM

src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html

@@ -5,12 +5,14 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div style="width: 100%; height: 100%; display: flex; flex-flow: row" (mouseover)="hover=true" (mouseleave)="hover=false">
-	<div #toolbar class="toolbar">
-	</div>
 	<div style="flex: 1 1 auto; flex-flow: column; overflow: hidden;">
-		<div #editor class="editor"></div>
+		<div style="display: flex; flex-flow: row">
+			<div #toolbar class="toolbar"></div>
+			<div style="flex: 1 1 auto; overflow: hidden;">
+				<div #editor class="editor"></div>
+			</div>
+			<div #moreactions class="moreActions" style="flex: 0 0 auto; flex-flow:column;width: 20px; min-height: 20px; max-height: 20px; padding-top: 0px; orientation: portrait"></div>
+		</div>
 		<collapse-component *ngIf="cellModel.cellType === 'code' && cellModel.source && cellModel.source.length > 1" [cellModel]="cellModel" [activeCellId]="activeCellId"></collapse-component>
 	</div>
-	<div #moreactions class="moreActions" style="flex: 0 0 auto; display: flex; flex-flow:column;width: 20px; min-height: 20px; max-height: 20px; padding-top: 0px; orientation: portrait">
-	</div>
 </div>

src/sql/workbench/contrib/notebook/browser/notebook.component.html

@@ -21,12 +21,7 @@
 			</button>
 		</div>
 		<div *ngFor="let cell of cells">
-			<div class="notebook-cell"
-			(click)="selectCell(cell, $event)"
-			(focus)="selectCell(cell, $event)"
-			[class.active]="cell.active"
-			[attr.aria-label]="cell.ariaLabel"
-			tabindex="0">
+			<div class="notebook-cell" (click)="selectCell(cell, $event)" [class.active]="cell.active">
 				<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 				</code-cell-component>
 				<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">

src/sql/workbench/contrib/notebook/browser/notebook.contribution.ts

@@ -7,7 +7,7 @@ import { EditorDescriptor, IEditorRegistry, Extensions as EditorExtensions } fro
 import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { localize } from 'vs/nls';
-import { IEditorInputFactoryRegistry, Extensions as EditorInputFactoryExtensions } from 'vs/workbench/common/editor';
+import { IEditorInputFactoryRegistry, Extensions as EditorInputFactoryExtensions, ActiveEditorContext } from 'vs/workbench/common/editor';
 
 import { ILanguageAssociationRegistry, Extensions as LanguageAssociationExtensions } from 'sql/workbench/services/languageAssociation/common/languageAssociation';
 import { UntitledNotebookInput } from 'sql/workbench/contrib/notebook/browser/models/untitledNotebookInput';
@@ -45,6 +45,7 @@ import { TextCellComponent } from 'sql/workbench/contrib/notebook/browser/cellVi
 import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions';
 import { NotebookThemingContribution } from 'sql/workbench/contrib/notebook/browser/notebookThemingContribution';
 import { LifecyclePhase } from 'vs/platform/lifecycle/common/lifecycle';
+import { ToggleTabFocusModeAction } from 'vs/editor/contrib/toggleTabFocusMode/toggleTabFocusMode';
 
 Registry.as<IEditorInputFactoryRegistry>(EditorInputFactoryExtensions.EditorInputFactories)
 	.registerEditorInputFactory(FileNotebookInput.ID, FileNoteBookEditorInputFactory);
@@ -135,6 +136,25 @@ MenuRegistry.appendMenuItem(MenuId.ExplorerWidgetContext, {
 	order: 1
 });
 
+const TOGGLE_TAB_FOCUS_COMMAND_ID = 'notebook.action.toggleTabFocusMode';
+const toggleTabFocusAction = new ToggleTabFocusModeAction();
+
+CommandsRegistry.registerCommand({
+	id: TOGGLE_TAB_FOCUS_COMMAND_ID,
+	handler: (accessor) => {
+		toggleTabFocusAction.run(accessor, undefined);
+	}
+});
+
+
+MenuRegistry.appendMenuItem(MenuId.CommandPalette, {
+	command: {
+		id: TOGGLE_TAB_FOCUS_COMMAND_ID,
+		title: toggleTabFocusAction.label,
+	},
+	when: ContextKeyExpr.and(ActiveEditorContext.isEqualTo(NotebookEditor.ID))
+});
+
 registerAction2(class extends Action2 {
 	constructor() {
 		super({

src/sql/workbench/services/notebook/browser/models/cell.ts

@@ -56,10 +56,6 @@ export class CellModel implements ICellModel {
 	private _isCollapsed: boolean;
 	private _onCollapseStateChanged = new Emitter<boolean>();
 	private _modelContentChangedEvent: IModelContentChangedEvent;
-	private readonly _ariaLabel: string;
-
-	private readonly codeCellLabel = localize('codeCellLabel', "Code Cell");
-	private readonly textCellLabel = localize('textCellLabel', "Text Cell");
 
 	constructor(cellData: nb.ICellContents,
 		private _options: ICellModelOptions,
@@ -74,12 +70,6 @@ export class CellModel implements ICellModel {
 			this._source = '';
 		}
 
-		if (this._cellType === CellTypes.Code) {
-			this._ariaLabel = this.codeCellLabel;
-		} else {
-			this._ariaLabel = this.textCellLabel;
-		}
-
 		this._isEditMode = this._cellType !== CellTypes.Markdown;
 		this._stdInVisible = false;
 		if (_options && _options.isTrusted) {
@@ -96,10 +86,6 @@ export class CellModel implements ICellModel {
 		return other !== undefined && other.id === this.id;
 	}
 
-	public get ariaLabel(): string {
-		return this._ariaLabel;
-	}
-
 	public get onCollapseStateChanged(): Event<boolean> {
 		return this._onCollapseStateChanged.event;
 	}

src/sql/workbench/services/notebook/browser/models/modelInterfaces.ts

@@ -487,7 +487,6 @@ export interface ICellModel {
 	readonly onCellModeChanged: Event<boolean>;
 	modelContentChangedEvent: IModelContentChangedEvent;
 	isEditMode: boolean;
-	readonly ariaLabel: string;
 }
 
 export interface IModelFactory {