Fix active cell update on tabbing (#18614)

* listen on focus_in of toolbar

* update styles on focus_in

* listen for active cell change on notebook componen

* add tabbing order to textcells

* remove duplicate listener

* clean up

* undo

* remove visible check from cellToolbar

* remove duplicate detectChanges on updateActiveCell

* only update active cell if it's already not

* add aria-label for accessibility

* localize the aria label

* refactor

* add cellLabel property to CellModel

* remove updateActiveCell from code component

* regression from merge fix

* set edit mode as true when focusing on cell

* moce check to model

* merge changes correctly

* update edit mode if code cell

* fixes

Co-authored-by: barbaravaldez <bavaldez@microsoft.com>
Co-authored-by: chgagnon <chgagnon@microsoft.com>

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

@@ -9,7 +9,7 @@
 	</div>
 	<div #container class="scrollable" style="flex: 1 1 auto; position: relative; outline: none" (click)="clickOffCell($event)" (scroll)="scrollHandler($event)">
 		<div *ngFor="let cell of cells">
-			<div id="{{ cell.id }}" class="notebook-cell" (click)="clickOnCell(cell, $event)" [class.active]="cell.active">
+			<div id="{{ cell.id }}" class="notebook-cell" (click)="clickOnCell(cell, $event)" [class.active]="cell.active" (focus)="updateActiveCell(cell)" tabindex="0" attr.aria-label="{{ cell.cellLabel }}">
 				<cell-toolbar-component *ngIf="cell.active" [cellModel]="cell" [model]="model"></cell-toolbar-component>
 				<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 				</code-cell-component>