From 2eebcab74a69e25f1c604b99a246c60d0b8b1642 Mon Sep 17 00:00:00 2001
From: Cory Rivera <corivera@microsoft.com>
Date: Thu, 23 Jan 2020 15:39:27 -0800
Subject: [PATCH] Make notebook cells selectable for tab navigation. (#8946)

---
 .../contrib/notebook/browser/models/cell.ts       | 15 +++++++++++++++
 .../notebook/browser/models/modelInterfaces.ts    |  1 +
 .../notebook/browser/notebook.component.html      |  7 ++++++-
 .../contrib/notebook/common/models/contracts.ts   |  1 -
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/sql/workbench/contrib/notebook/browser/models/cell.ts b/src/sql/workbench/contrib/notebook/browser/models/cell.ts
index 190c15b5ef..6224f108e7 100644
--- a/src/sql/workbench/contrib/notebook/browser/models/cell.ts
+++ b/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;
 	}
diff --git a/src/sql/workbench/contrib/notebook/browser/models/modelInterfaces.ts b/src/sql/workbench/contrib/notebook/browser/models/modelInterfaces.ts
index 57ffc64946..4cc7374ded 100644
--- a/src/sql/workbench/contrib/notebook/browser/models/modelInterfaces.ts
+++ b/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 {
diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.component.html b/src/sql/workbench/contrib/notebook/browser/notebook.component.html
index bd3626aa07..2af92efc31 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebook.component.html
+++ b/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">
diff --git a/src/sql/workbench/contrib/notebook/common/models/contracts.ts b/src/sql/workbench/contrib/notebook/common/models/contracts.ts
index afab392188..f3d0ad6b96 100644
--- a/src/sql/workbench/contrib/notebook/common/models/contracts.ts
+++ b/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