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>
This commit is contained in:
Maddy
2022-04-08 12:31:30 -07:00
committed by GitHub
parent 41b639c7d6
commit 4191ef8aa5
9 changed files with 37 additions and 16 deletions

View File

@@ -297,7 +297,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
public selectCell(cell: ICellModel) {
if (!this.model.activeCell || this.model.activeCell.id !== cell.id) {
this.model.updateActiveCell(cell);
this.detectChanges();
}
}
@@ -340,7 +339,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
public unselectActiveCell() {
this.model.updateActiveCell(undefined);
this.detectChanges();
}
public updateActiveCell(cell: ICellModel) {
this._model.updateActiveCell(cell);
}
// Handles double click to edit icon change
@@ -446,6 +448,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
this._register(this._model.contentChanged((change) => this.handleContentChanged(change)));
this._register(this._model.onProviderIdChange((provider) => this.handleProviderIdChanged(provider)));
this._register(this._model.kernelChanged((kernelArgs) => this.handleKernelChanged(kernelArgs)));
this._register(this._model.onActiveCellChanged(() => this.detectChanges()));
this._register(this._model.onCellTypeChanged(() => this.detectChanges()));
this._register(this._model.layoutChanged(() => this.detectChanges()));
this._register(this.model.onScroll.event(() => this._onScroll.fire()));