fix(material-experimental/mdc-chips): add 'required' to chips input (#23055)

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.

Co-authored-by: Catalina Patiño <[email protected]>
(cherry picked from commit ca02022)

Author: 2 people

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

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 {