feat(material/form-field): make mat-errors more polite

Make the "politeness" of mat-error "polite" by default (instead of "assertive") and also make this
configurable via an input binding.

Fixes #21781

update mdc code

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

@@ -905,11 +905,11 @@ describe('MDC-based MatChipGrid', () => {
       });
     }));
 
-    it('should set the proper role on the error messages', () => {
+    it('should set the proper aria-live attribute on the error messages', () => {
       errorTestComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
-      expect(containerEl.querySelector('mat-error')!.getAttribute('role')).toBe('alert');
+      expect(containerEl.querySelector('mat-error')!.getAttribute('aria-live')).toBe('polite');
     });
 
     it('sets the aria-describedby to reference errors when in error state', () => {

src/material-experimental/mdc-form-field/directives/error.ts

@@ -22,11 +22,13 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
   selector: 'mat-error',
   host: {
     'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align',
-    'role': 'alert',
+    '[attr.aria-live]': 'ariaLive',
     '[id]': 'id',
   },
   providers: [{provide: MAT_ERROR, useExisting: MatError}],
 })
 export class MatError {
   @Input() id: string = `mat-mdc-error-${nextUniqueId++}`;
+
+  @Input('aria-live') ariaLive = 'polite';
 }

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

@@ -1037,11 +1037,11 @@ describe('MatMdcInput with forms', () => {
         .toBe(1, 'Expected one hint to still be shown.');
     }));
 
-    it('should set the proper role on the error messages', fakeAsync(() => {
+    it('should set the proper aria-live attribute on the error messages', fakeAsync(() => {
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
-      expect(containerEl.querySelector('mat-error')!.getAttribute('role')).toBe('alert');
+      expect(containerEl.querySelector('mat-error')!.getAttribute('aria-live')).toBe('polite');
     }));
 
     it('sets the aria-describedby to reference errors when in error state', fakeAsync(() => {

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

@@ -1282,11 +1282,11 @@ describe('MatChipList', () => {
       });
     }));
 
-    it('should set the proper role on the error messages', () => {
+    it('should set the proper aria-live attribute on the error messages', () => {
       errorTestComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
-      expect(containerEl.querySelector('mat-error')!.getAttribute('role')).toBe('alert');
+      expect(containerEl.querySelector('mat-error')!.getAttribute('aria-live')).toBe('polite');
     });
 
     it('sets the aria-describedby to reference errors when in error state', () => {

src/material/form-field/error.ts

@@ -22,11 +22,13 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
   selector: 'mat-error',
   host: {
     'class': 'mat-error',
-    'role': 'alert',
     '[attr.id]': 'id',
+    '[attr.aria-live]': 'ariaLive',
   },
   providers: [{provide: MAT_ERROR, useExisting: MatError}],
 })
 export class MatError {
   @Input() id: string = `mat-error-${nextUniqueId++}`;
+
+  @Input('aria-live') ariaLive = 'polite';
 }

src/material/input/input.spec.ts

@@ -1193,11 +1193,11 @@ describe('MatInput with forms', () => {
         .toBe(1, 'Expected one hint to still be shown.');
     }));
 
-    it('should set the proper role on the error messages', fakeAsync(() => {
+    it('should set the proper aria-live attribute on the error messages', fakeAsync(() => {
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
-      expect(containerEl.querySelector('mat-error')!.getAttribute('role')).toBe('alert');
+      expect(containerEl.querySelector('mat-error')!.getAttribute('aria-live')).toBe('polite');
     }));
 
     it('sets the aria-describedby to reference errors when in error state', fakeAsync(() => {

tools/public_api_guard/material/form-field.d.ts

@@ -19,8 +19,9 @@ export declare const MAT_PREFIX: InjectionToken<MatPrefix>;
 export declare const MAT_SUFFIX: InjectionToken<MatSuffix>;
 
 export declare class MatError {
+    ariaLive: string;
     id: string;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatError, "mat-error", never, { "id": "id"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatError, "mat-error", never, { "id": "id"; "ariaLive": "aria-live"; }, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatError, never>;
 }