fix(mdc-chips): Set aria-required on input instead of grid (#18049)

The aria-required attribute is not allowed on elements with role=grid, which causes axe
to report an error. If the grid is required, set aria-required on the matChipInputFor
input element instead.

Author: vanessanschmitt

src/dev-app/mdc-chips/mdc-chips-demo.html

@@ -184,7 +184,7 @@ <h4>Stacked</h4>
         You can also stack the chips if you want them on top of each other.
       </p>
 
-      <mat-chip-set class="mat-mdc-chip-set-stacked" aria-orientation="vertical">
+      <mat-chip-set class="mat-mdc-chip-set-stacked">
         <mat-chip *ngFor="let aColor of availableColors" highlighted="true"
                   [color]="aColor.color">
           {{aColor.name}}

src/material-experimental/mdc-chips/chip-grid.spec.ts

@@ -103,15 +103,6 @@ describe('MDC-based MatChipGrid', () => {
 
         expect(chipGridNativeElement.hasAttribute('role')).toBe(false);
       });
-
-      it('should not set aria-required when it does not have a role', () => {
-        testComponent.chips = [];
-        fixture.detectChanges();
-
-        expect(chipGridNativeElement.hasAttribute('role')).toBe(false);
-        expect(chipGridNativeElement.hasAttribute('aria-required')).toBe(false);
-      });
-
     });
 
     describe('focus behaviors', () => {

src/material-experimental/mdc-chips/chip-grid.ts

@@ -87,7 +87,6 @@ const _MatChipGridMixinBase: CanUpdateErrorStateCtor & typeof MatChipGridBase =
     '[tabIndex]': '_chips && _chips.length === 0 ? -1 : tabIndex',
     // TODO: replace this binding with use of AriaDescriber
     '[attr.aria-describedby]': '_ariaDescribedby || null',
-    '[attr.aria-required]': 'role ? required : null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-invalid]': 'errorState',
     '[class.mat-mdc-chip-list-disabled]': 'disabled',

src/material-experimental/mdc-chips/chip-input.spec.ts

@@ -95,7 +95,7 @@ describe('MDC-based MatChipInput', () => {
       expect(label.textContent).toContain('or don\'t');
     });
 
-    it('should become disabled if the chip list is disabled', () => {
+    it('should become disabled if the chip grid is disabled', () => {
       expect(inputNativeElement.hasAttribute('disabled')).toBe(false);
       expect(chipInputDirective.disabled).toBe(false);
 
@@ -106,6 +106,15 @@ describe('MDC-based MatChipInput', () => {
       expect(chipInputDirective.disabled).toBe(true);
     });
 
+    it('should be aria-required if the chip grid is required', () => {
+      expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);
+
+      fixture.componentInstance.required = true;
+      fixture.detectChanges();
+
+      expect(inputNativeElement.getAttribute('aria-required')).toBe('true');
+    });
+
     it('should allow focus to escape when tabbing forwards', fakeAsync(() => {
       const gridElement: HTMLElement = fixture.nativeElement.querySelector('mat-chip-grid');
 
@@ -249,7 +258,7 @@ describe('MDC-based MatChipInput', () => {
 @Component({
   template: `
     <mat-form-field>
-      <mat-chip-grid #chipGrid>
+      <mat-chip-grid #chipGrid [required]="required">
         <mat-chip-row>Hello</mat-chip-row>
         <input matInput [matChipInputFor]="chipGrid"
                   [matChipInputAddOnBlur]="addOnBlur"
@@ -263,6 +272,7 @@ class TestChipInput {
   @ViewChild(MatChipGrid) chipGridInstance: MatChipGrid;
   addOnBlur: boolean = false;
   placeholder = '';
+  required = false;
 
   add(_: MatChipInputEvent) {
   }

src/material-experimental/mdc-chips/chip-input.ts

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