diff --git a/src/lib/chips/chip-input.ts b/src/lib/chips/chip-input.ts index 21828ad1173..e9cbb898a51 100644 --- a/src/lib/chips/chip-input.ts +++ b/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 { diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 678100dd703..3bbc773e543 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/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));