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

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

Fixes #21781

Author: chrisbubernak

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, InjectionToken, Input} from '@angular/core';
+import {Attribute, Directive, ElementRef, InjectionToken, Input} from '@angular/core';
 
 let nextUniqueId = 0;
 
@@ -22,11 +22,19 @@ 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',
+    'aria-atomic': 'true',
     '[id]': 'id',
   },
   providers: [{provide: MAT_ERROR, useExisting: MatError}],
 })
 export class MatError {
   @Input() id: string = `mat-mdc-error-${nextUniqueId++}`;
+
+  constructor(@Attribute('aria-live') ariaLive: string, elementRef: ElementRef) {
+    // If no aria-live value is set add 'polite' as a default. This is preferred over setting
+    // role='alert' so that screen readers do not interrupt the current task to read this aloud.
+    if (!ariaLive) {
+      elementRef.nativeElement.setAttribute('aria-live', 'polite');
+    }
+  }
 }

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

@@ -1044,11 +1044,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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, InjectionToken, Input} from '@angular/core';
+import {Attribute, Directive, ElementRef, InjectionToken, Input} from '@angular/core';
 
 let nextUniqueId = 0;
 
@@ -22,11 +22,19 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
   selector: 'mat-error',
   host: {
     'class': 'mat-error',
-    'role': 'alert',
     '[attr.id]': 'id',
+    'aria-atomic': 'true',
   },
   providers: [{provide: MAT_ERROR, useExisting: MatError}],
 })
 export class MatError {
   @Input() id: string = `mat-error-${nextUniqueId++}`;
+
+  constructor(@Attribute('aria-live') ariaLive: string, elementRef: ElementRef) {
+    // If no aria-live value is set add 'polite' as a default. This is preferred over setting
+    // role='alert' so that screen readers do not interrupt the current task to read this aloud.
+    if (!ariaLive) {
+      elementRef.nativeElement.setAttribute('aria-live', '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

@@ -20,8 +20,9 @@ export declare const MAT_SUFFIX: InjectionToken<MatSuffix>;
 
 export declare class MatError {
     id: string;
+    constructor(ariaLive: string, elementRef: ElementRef);
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatError, "mat-error", never, { "id": "id"; }, {}, never>;
-    static ɵfac: i0.ɵɵFactoryDef<MatError, never>;
+    static ɵfac: i0.ɵɵFactoryDef<MatError, [{ attribute: "aria-live"; }, null]>;
 }
 
 export declare class MatFormField extends _MatFormFieldMixinBase implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy, CanColor {