From 3e729d311bd489117239b05763b9e4922030d8c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Catalina=20Pati=C3=B1o?= Date: Wed, 23 Jun 2021 23:30:43 +0000 Subject: [PATCH] fix(material-experimental/mdc-chips): add 'required' to chips input Adds missing 'required' attribute to chips input. Currently, chips add 'aria-required' only, which is for backwards compatibility. The addision also fixes a bug for axe tests that check for the same value fort 'required' and 'aria-required' attributes. --- src/material-experimental/mdc-chips/chip-input.spec.ts | 9 +++++++++ src/material-experimental/mdc-chips/chip-input.ts | 1 + 2 files changed, 10 insertions(+) diff --git a/src/material-experimental/mdc-chips/chip-input.spec.ts b/src/material-experimental/mdc-chips/chip-input.spec.ts index 2388927b48ee..36dcc19d1894 100644 --- a/src/material-experimental/mdc-chips/chip-input.spec.ts +++ b/src/material-experimental/mdc-chips/chip-input.spec.ts @@ -94,6 +94,15 @@ describe('MDC-based MatChipInput', () => { expect(inputNativeElement.getAttribute('aria-required')).toBe('true'); }); + it('should be required if the list is required', () => { + expect(inputNativeElement.hasAttribute('required')).toBe(false); + + fixture.componentInstance.required = true; + fixture.detectChanges(); + + expect(inputNativeElement.getAttribute('required')).toBe('true'); + }); + it('should allow focus to escape when tabbing forwards', fakeAsync(() => { const gridElement: HTMLElement = fixture.nativeElement.querySelector('mat-chip-grid'); diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts index a05a970fc5eb..3bab6af349f8 100644 --- a/src/material-experimental/mdc-chips/chip-input.ts +++ b/src/material-experimental/mdc-chips/chip-input.ts @@ -69,6 +69,7 @@ let nextUniqueId = 0; '[attr.placeholder]': 'placeholder || null', '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null', '[attr.aria-required]': '_chipGrid && _chipGrid.required || null', + '[attr.required]': '_chipGrid && _chipGrid.required || null', } }) export class MatChipInput implements MatChipTextControl, AfterContentInit, OnChanges, OnDestroy {