Make notebook cells selectable for tab navigation. (#8946)

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

@@ -54,6 +54,10 @@ 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,
@@ -67,6 +71,13 @@ export class CellModel implements ICellModel {
 			this._cellType = CellTypes.Code;
 			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) {
@@ -83,6 +94,10 @@ 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/contrib/notebook/browser/models/modelInterfaces.ts

@@ -543,6 +543,7 @@ export interface ICellModel {
 	readonly onCollapseStateChanged: Event<boolean>;
 	modelContentChangedEvent: IModelContentChangedEvent;
 	isEditMode: boolean;
+	readonly ariaLabel: string;
 }
 
 export interface FutureInternal extends nb.IFuture {

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

@@ -21,7 +21,12 @@
 			</button>
 		</div>
 		<div *ngFor="let cell of cells">
-			<div class="notebook-cell" (click)="selectCell(cell, $event)" [class.active]="cell.active">
+			<div class="notebook-cell"
+			(click)="selectCell(cell, $event)"
+			(focus)="selectCell(cell, $event)"
+			[class.active]="cell.active"
+			[attr.aria-label]="cell.ariaLabel"
+			tabindex="0">
 				<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/common/models/contracts.ts

@@ -9,7 +9,6 @@ export type CellType = 'code' | 'markdown' | 'raw';
 export class CellTypes {
 	public static readonly Code = 'code';
 	public static readonly Markdown = 'markdown';
-	public static readonly Raw = 'raw';
 }
 
 // to do: add all mime types