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

@@ -5,6 +5,7 @@ import {
   dispatchEvent,
   dispatchFakeEvent,
   dispatchKeyboardEvent,
+  dispatchMouseEvent,
 } from '@angular/cdk/testing/private';
 import {Component, DebugElement, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
@@ -245,6 +246,90 @@ 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();
+        dispatchMouseEvent(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();
+
+        // Need to also simulate the mousedown as that sets the already focused flag.
+        dispatchMouseEvent(chipNativeElement, 'mousedown');
+        dispatchMouseEvent(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();
+
+          // Need to also simulate the mousedown as that sets the already focused flag.
+          dispatchMouseEvent(chipNativeElement, 'mousedown');
+          dispatchMouseEvent(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();
+
+          // Need to also simulate the mousedown as that sets the already focused flag.
+          dispatchMouseEvent(chipNativeElement, 'mousedown');
+          dispatchMouseEvent(chipNativeElement, 'click');
+          fixture.detectChanges();
+          expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
+        }));
+      });
     });
 
     describe('editing behavior', () => {

src/material/chips/chip-row.ts

@@ -60,6 +60,8 @@ export interface MatChipEditedEvent extends MatChipEvent {
     '[attr.aria-description]': 'null',
     '[attr.role]': 'role',
     '(focus)': '_handleFocus()',
+    '(mousedown)': '_handleMouseDown($event)',
+    '(click)': '_handleClick($event)',
     '(dblclick)': '_handleDoubleclick($event)',
   },
   providers: [
@@ -92,6 +94,15 @@ export class MatChipRow extends MatChip implements AfterViewInit {
   /** The projected chip edit input. */
   @ContentChild(MatChipEditInput) contentEditInput?: MatChipEditInput;
 
+  /**
+   * Set on a mousedown when the chip is already 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 +115,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
       if (this._isEditing && !this._editStartPending) {
         this._onEditFinish();
       }
+      this._alreadyFocused = false;
     });
   }
 
@@ -135,6 +147,17 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     }
   }
 
+  /** Sets _alreadyFocused (ahead of click) when chip already has focus. */
+  _handleMouseDown(event: MouseEvent) {
+    this._alreadyFocused = this._hasFocus();
+  }
+
+  _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);