fix(material-experimental/mdc-chips): Mirror aria-describedby to matC…

…hipInput

Updates mat-chip-grid to associate any ids set for aria-describedby to
the matChipInput instance within the grid, if one exists.

Fixes #24542

src/material-experimental/mdc-chips/chip-grid.ts

@@ -337,6 +337,10 @@ export class MatChipGrid
   /** Associates an HTML input element with this chip grid. */
   registerInput(inputElement: MatChipTextControl): void {
     this._chipInput = inputElement;
+
+    if (this._ariaDescribedby) {
+      this._chipInput.setDescribedByIds(this._ariaDescribedby.split(' '));
+    }
   }
 
   /**
@@ -379,6 +383,10 @@ export class MatChipGrid
    */
   setDescribedByIds(ids: string[]) {
     this._ariaDescribedby = ids.join(' ');
+
+    if (this._chipInput) {
+      this._chipInput.setDescribedByIds(ids);
+    }
   }
 
   /**

src/material-experimental/mdc-chips/chip-input.spec.ts

@@ -230,6 +230,24 @@ describe('MDC-based MatChipInput', () => {
       dispatchKeyboardEvent(inputNativeElement, 'keydown', ENTER, undefined, {shift: true});
       expect(testChipInput.add).not.toHaveBeenCalled();
     });
+
+    it('should set aria-describedby correctly when a non-empty list of ids is passed to setDescribedByIds', () => {
+      const ids = ['a', 'b', 'c'];
+
+      testChipInput.chipGridInstance.setDescribedByIds(ids);
+      fixture.detectChanges();
+
+      expect(inputNativeElement.getAttribute('aria-describedby')).toEqual('a b c');
+    });
+
+    it('should set aria-describedby correctly when an empty list of ids is passed to setDescribedByIds', () => {
+      const ids: string[] = [];
+
+      testChipInput.chipGridInstance.setDescribedByIds(ids);
+      fixture.detectChanges();
+
+      expect(inputNativeElement.getAttribute('aria-describedby')).toBeNull();
+    });
   });
 });
 

src/material-experimental/mdc-chips/chip-input.ts

@@ -65,6 +65,7 @@ let nextUniqueId = 0;
     '[attr.disabled]': 'disabled || null',
     '[attr.placeholder]': 'placeholder || null',
     '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null',
+    '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-required]': '_chipGrid && _chipGrid.required || null',
     '[attr.required]': '_chipGrid && _chipGrid.required || null',
   },
@@ -73,6 +74,9 @@ export class MatChipInput implements MatChipTextControl, AfterContentInit, OnCha
   /** Used to prevent focus moving to chips while user is holding backspace */
   private _focusLastChipOnBackspace: boolean;
 
+  /** Value for ariaDescribedby property */
+  _ariaDescribedby?: string;
+
   /** Whether the control is focused. */
   focused: boolean = false;
   _chipGrid: MatChipGrid;
@@ -240,6 +244,10 @@ export class MatChipInput implements MatChipTextControl, AfterContentInit, OnCha
     this._focusLastChipOnBackspace = true;
   }
 
+  setDescribedByIds(ids: string[]): void {
+    this._ariaDescribedby = ids.join(' ');
+  }
+
   /** Checks whether a keycode is one of the configured separators. */
   private _isSeparatorKey(event: KeyboardEvent) {
     return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);

src/material-experimental/mdc-chips/chip-text-control.ts

@@ -22,4 +22,7 @@ export interface MatChipTextControl {
 
   /** Focuses the text control. */
   focus(): void;
+
+  /** Sets the list of ids the input is described by. */
+  setDescribedByIds(ids: string[]): void;
 }