feat(material/chips): add unit tests for custom aria-describedby

Author: RobertAKARobin

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>
 
 

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();
+  hint: string;
   tabIndexOverride: number;
   selectable: boolean;
 

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;

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);