From 313431eb5f5c3c467c4cd2a431c867ebf606701b Mon Sep 17 00:00:00 2001
From: RobertAKARobin <contact@robertakarobin.com>
Date: Thu, 24 Mar 2022 09:17:18 -0500
Subject: [PATCH] feat(material/chips): add unit tests for custom
 aria-describedby

---
 src/dev-app/chips/chips-demo.html        |  2 ++
 src/material/chips/chip-list.spec.ts     | 23 +++++++++++++++++++++++
 src/material/chips/chip-list.ts          | 11 ++++++++++-
 tools/public_api_guard/material/chips.md |  3 ++-
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index b5ebf78d29b4..178ed81cc080 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -124,6 +124,8 @@ <h4>Form Field</h4>
                  [matChipInputAddOnBlur]="addOnBlur"
                  (matChipInputTokenEnd)="add($event)" />
         </mat-chip-list>
+        <mat-hint><code>&lt;mat-hint&gt;</code> is supported too!</mat-hint>
+        <mat-error><code>&lt;mat-error&gt;</code> is supported too!</mat-error>
       </mat-form-field>
 
 
diff --git a/src/material/chips/chip-list.spec.ts b/src/material/chips/chip-list.spec.ts
index 528657485d66..f14cea8285b8 100644
--- a/src/material/chips/chip-list.spec.ts
+++ b/src/material/chips/chip-list.spec.ts
@@ -749,6 +749,8 @@ describe('MatChipList', () => {
     let nativeChips: HTMLElement[];
 
     describe('single selection', () => {
+      let chipListEl: HTMLElement;
+
       beforeEach(() => {
         fixture = createComponent(BasicChipList);
         fixture.detectChanges();
@@ -757,6 +759,7 @@ describe('MatChipList', () => {
           .queryAll(By.css('mat-chip'))
           .map(chip => chip.nativeElement);
         chips = fixture.componentInstance.chips;
+        chipListEl = fixture.debugElement.query(By.css('mat-chip-list'))!.nativeElement;
       });
 
       it('should take an initial view value with reactive forms', () => {
@@ -949,6 +952,22 @@ describe('MatChipList', () => {
 
         expect(formField.classList).not.toContain('mat-focused');
       }));
+
+      it('should set `aria-describedby` to the id of the mat-hint', fakeAsync(() => {
+        expect(chipListEl.getAttribute('aria-describedby')).toBeNull();
+
+        fixture.componentInstance.hint = 'test';
+        fixture.detectChanges();
+        const hint = fixture.debugElement.query(By.css('.mat-hint')).nativeElement;
+        expect(chipListEl.getAttribute('aria-describedby')).toBe(hint.getAttribute('id'));
+        expect(chipListEl.getAttribute('aria-describedby')).toMatch(/^mat-hint-\d+$/);
+      }));
+
+      it('should support user binding to `aria-describedby`', fakeAsync(() => {
+        fixture.componentInstance.ariaDescribedBy = 'test';
+        fixture.detectChanges();
+        expect(chipListEl.getAttribute('aria-describedby')).toBe('test');
+      }));
     });
 
     describe('multiple selection', () => {
@@ -1586,11 +1605,13 @@ class FormFieldChipList {
   template: `
     <mat-form-field>
       <mat-chip-list placeholder="Food" [formControl]="control"
+        [aria-describedby]="ariaDescribedBy"
         [tabIndex]="tabIndexOverride" [selectable]="selectable">
         <mat-chip *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
           {{ food.viewValue }}
         </mat-chip>
       </mat-chip-list>
+      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
     </mat-form-field>
   `,
 })
@@ -1605,7 +1626,9 @@ class BasicChipList {
     {value: 'pasta-6', viewValue: 'Pasta'},
     {value: 'sushi-7', viewValue: 'Sushi'},
   ];
+  ariaDescribedBy: string = '';
   control = new FormControl<string | null>(null);
+  hint: string;
   tabIndexOverride: number;
   selectable: boolean;
 
diff --git a/src/material/chips/chip-list.ts b/src/material/chips/chip-list.ts
index 9fbeab038666..92519de160ab 100644
--- a/src/material/chips/chip-list.ts
+++ b/src/material/chips/chip-list.ts
@@ -197,7 +197,16 @@ export class MatChipList
    * Implemented as part of MatFormFieldControl.
    * @docs-private
    */
-  @Input('aria-describedby') userAriaDescribedBy: string;
+  @Input('aria-describedby')
+  get userAriaDescribedBy(): string {
+    return this._userAriaDescribedBy;
+  }
+  set userAriaDescribedBy(userAriaDescribedBy: string) {
+    this._userAriaDescribedBy = userAriaDescribedBy;
+    this.stateChanges.next();
+  }
+
+  private _userAriaDescribedBy: string;
 
   /** An object used to control when error messages are shown. */
   @Input() override errorStateMatcher: ErrorStateMatcher;
diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md
index 29bb7709427f..30f872f53f22 100644
--- a/tools/public_api_guard/material/chips.md
+++ b/tools/public_api_guard/material/chips.md
@@ -256,7 +256,8 @@ export class MatChipList extends _MatChipListBase implements MatFormFieldControl
     _uid: string;
     protected _updateFocusForDestroyedChips(): void;
     protected _updateTabIndex(): void;
-    userAriaDescribedBy: string;
+    get userAriaDescribedBy(): string;
+    set userAriaDescribedBy(userAriaDescribedBy: string);
     _userTabIndex: number | null;
     get value(): any;
     set value(value: any);