fix(material/chips): provide ability to edit for all screen readers with a click on already focused chip

Author: adolgachev

goldens/material/chips/index.api.md

@@ -416,13 +416,17 @@ export class MatChipRemove extends MatChipAction {
 export class MatChipRow extends MatChip implements AfterViewInit {
     constructor(...args: unknown[]);
     // (undocumented)
+    _alreadyFocused: boolean;
+    // (undocumented)
     protected basicChipAttrName: string;
     contentEditInput?: MatChipEditInput;
     defaultEditInput?: MatChipEditInput;
     // (undocumented)
     editable: boolean;
     readonly edited: EventEmitter<MatChipEditedEvent>;
     // (undocumented)
+    _handleClick(event: MouseEvent): void;
+    // (undocumented)
     _handleDoubleclick(event: MouseEvent): void;
     _handleFocus(): void;
     // (undocumented)

src/material/chips/chip-row.spec.ts

@@ -245,6 +245,93 @@ describe('Row Chips', () => {
         fixture.detectChanges();
         expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeTruthy();
       });
+
+      it('should not begin editing on single click', () => {
+        expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        dispatchKeyboardEvent(chipNativeElement, 'click');
+        fixture.detectChanges();
+        expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+      });
+
+      it('should begin editing on single click when focused', fakeAsync(() => {
+        expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+
+        chipNativeElement.focus();
+        flush();
+        fixture.detectChanges();
+
+        dispatchKeyboardEvent(chipNativeElement, 'click');
+        fixture.detectChanges();
+        expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeTruthy();
+      }));
+
+      describe('when disabled', () => {
+        beforeEach(() => {
+          testComponent.disabled = true;
+          fixture.changeDetectorRef.markForCheck();
+          fixture.detectChanges();
+        });
+
+        it('should not begin editing on double click', () => {
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+          dispatchFakeEvent(chipNativeElement, 'dblclick');
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        });
+
+        it('should not begin editing on ENTER', () => {
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+          dispatchKeyboardEvent(chipNativeElement, 'keydown', ENTER);
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        });
+
+        it('should not begin editing on single click when focused', fakeAsync(() => {
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+
+          chipNativeElement.focus();
+          flush();
+          fixture.detectChanges();
+
+          dispatchKeyboardEvent(chipNativeElement, 'click');
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        }));
+      });
+
+      describe('when not editable', () => {
+        beforeEach(() => {
+          testComponent.editable = false;
+          fixture.changeDetectorRef.markForCheck();
+          fixture.detectChanges();
+        });
+
+        it('should not begin editing on double click', () => {
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+          dispatchFakeEvent(chipNativeElement, 'dblclick');
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        });
+
+        it('should not begin editing on ENTER', () => {
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+          dispatchKeyboardEvent(chipNativeElement, 'keydown', ENTER);
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        });
+
+        it('should not begin editing on single click when focused', fakeAsync(() => {
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+
+          chipNativeElement.focus();
+          flush();
+          fixture.detectChanges();
+
+          dispatchKeyboardEvent(chipNativeElement, 'click');
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        }));
+      });
     });
 
     describe('editing behavior', () => {

src/material/chips/chip-row.ts

@@ -60,6 +60,7 @@ export interface MatChipEditedEvent extends MatChipEvent {
     '[attr.aria-description]': 'null',
     '[attr.role]': 'role',
     '(focus)': '_handleFocus()',
+    '(click)': '_handleClick($event)',
     '(dblclick)': '_handleDoubleclick($event)',
   },
   providers: [
@@ -92,6 +93,15 @@ export class MatChipRow extends MatChip implements AfterViewInit {
   /** The projected chip edit input. */
   @ContentChild(MatChipEditInput) contentEditInput?: MatChipEditInput;
 
+  /**
+   * Set with a timeout when the chips has been focused via mouse or keyboard.
+   *
+   * This allows us to ensure chip is already focused when deciding whether to enter the
+   * edit mode on a subsequent click. Otherwise, the chip appears focused when handling the
+   * first click event.
+   */
+  _alreadyFocused = false;
+
   _isEditing = false;
 
   constructor(...args: unknown[]);
@@ -104,6 +114,15 @@ export class MatChipRow extends MatChip implements AfterViewInit {
       if (this._isEditing && !this._editStartPending) {
         this._onEditFinish();
       }
+      this._alreadyFocused = false;
+    });
+    this._onFocus.pipe(takeUntil(this.destroyed)).subscribe(() => {
+      if (!this._isEditing && !this.disabled) {
+        // Need a timeout to ensure flag not set while handling the first click.
+        this._ngZone.runOutsideAngular(() => {
+          setTimeout(() => (this._alreadyFocused = true), 100);
+        });
+      }
     });
   }
 
@@ -135,6 +154,12 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     }
   }
 
+  _handleClick(event: MouseEvent) {
+    if (!this.disabled && this.editable && !this._isEditing && this._alreadyFocused) {
+      this._startEditing(event);
+    }
+  }
+
   _handleDoubleclick(event: MouseEvent) {
     if (!this.disabled && this.editable) {
       this._startEditing(event);