fix(chips): set aria-invalid on chip input (#13249)

Currently we set `aria-invalid` automatically on inputs inside a form field, but not on one inside a chip list. These changes add `aria-invalid` to the chip input, when the related chip list is invalid.

Fixes #13205.

Author: crisbeto

src/lib/chips/chip-input.ts

@@ -40,6 +40,7 @@ let nextUniqueId = 0;
     '[id]': 'id',
     '[attr.disabled]': 'disabled || null',
     '[attr.placeholder]': 'placeholder || null',
+    '[attr.aria-invalid]': '_chipList && _chipList.ngControl ? _chipList.ngControl.invalid : null',
   }
 })
 export class MatChipInput implements OnChanges {

src/lib/chips/chip-list.spec.ts

@@ -1040,6 +1040,20 @@ describe('MatChipList', () => {
       expect(document.activeElement).toBe(nativeInput, 'Expected input to remain focused.');
     }));
 
+    it('should set aria-invalid if the form field is invalid', () => {
+      fixture.componentInstance.control = new FormControl(undefined, [Validators.required]);
+      fixture.detectChanges();
+
+      const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
+
+      expect(input.getAttribute('aria-invalid')).toBe('true');
+
+      fixture.componentInstance.chips.first.selectViaInteraction();
+      fixture.detectChanges();
+
+      expect(input.getAttribute('aria-invalid')).toBe('false');
+    });
+
     describe('keyboard behavior', () => {
       beforeEach(() => {
         chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList));