fix(material/input): Do not set aria-invalid on empty matInputs

Updates the logic for setting `aria-invalid` on `matInput` to not set
the value at all if the input has no value.

Prior to this PR `matInput` sets `aria-invalid="false"` for any empty
`matInput`, including `required` ones.  This suppresses screen readers'
announcement to users that such inputs are in an invalid state.

Fixes #22777

Add MDC implementation.  Whoops.

Author: ByzantineFailure

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

@@ -928,7 +928,7 @@ describe('MatMdcInput with forms', () => {
       expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
       expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .toBe(null, 'Expected aria-invalid not to be present.');
     }));
 
     it('should display an error message when the input is touched and invalid', fakeAsync(() => {
@@ -997,7 +997,7 @@ describe('MatMdcInput with forms', () => {
       expect(component.formGroup.invalid).toBe(true, 'Expected form control to be invalid');
       expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .toBe(null, 'Expected aria-invalid not to be present');
       expect(component.formGroupDirective.submitted)
         .toBe(false, 'Expected form not to have been submitted');
 
@@ -1081,7 +1081,7 @@ describe('MatMdcInput with forms', () => {
       expect(describedBy).toBe(errorIds);
     }));
 
-    it('should not set `aria-invalid` to true if the input is empty', fakeAsync(() => {
+    it('should not set `aria-invalid` if the input is empty', fakeAsync(() => {
       // Submit the form since it's the one that triggers the default error state matcher.
       dispatchFakeEvent(fixture.nativeElement.querySelector('form'), 'submit');
       fixture.detectChanges();
@@ -1090,7 +1090,7 @@ describe('MatMdcInput with forms', () => {
       expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
       expect(inputEl.value).toBeFalsy();
       expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to "false".');
+          .toBe(null, 'Expected aria-invalid not to be present');
 
       inputEl.value = 'not valid';
       fixture.detectChanges();

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

@@ -39,7 +39,7 @@ import {MatInput as BaseMatInput} from '@angular/material/input';
     '[attr.readonly]': 'readonly && !_isNativeSelect || null',
     // Only mark the input as invalid for assistive technology if it has a value since the
     // state usually overlaps with `aria-required` when the input is empty and can be redundant.
-    '[attr.aria-invalid]': 'errorState && !empty',
+    '[attr.aria-invalid]': 'empty ? null : errorState',
     '[attr.aria-required]': 'required',
   },
   providers: [{provide: MatFormFieldControl, useExisting: MatInput}],

src/material/input/input.spec.ts

@@ -1081,7 +1081,7 @@ describe('MatInput with forms', () => {
       expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
       expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .toBe(null, 'Expected aria-invalid not to be present.');
     }));
 
     it('should display an error message when the input is touched and invalid', fakeAsync(() => {
@@ -1135,7 +1135,7 @@ describe('MatInput with forms', () => {
       expect(component.formGroup.invalid).toBe(true, 'Expected form control to be invalid');
       expect(containerEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error message');
       expect(inputEl.getAttribute('aria-invalid'))
-        .toBe('false', 'Expected aria-invalid to be set to "false".');
+        .toBe(null, 'Expected aria-invalid not to be present.');
       expect(component.formGroupDirective.submitted)
         .toBe(false, 'Expected form not to have been submitted');
 
@@ -1219,7 +1219,7 @@ describe('MatInput with forms', () => {
       expect(describedBy).toBe(errorIds);
     }));
 
-    it('should not set `aria-invalid` to true if the input is empty', fakeAsync(() => {
+    it('should not set `aria-invalid` if the input is empty', fakeAsync(() => {
       // Submit the form since it's the one that triggers the default error state matcher.
       dispatchFakeEvent(fixture.nativeElement.querySelector('form'), 'submit');
       fixture.detectChanges();
@@ -1228,7 +1228,7 @@ describe('MatInput with forms', () => {
       expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid');
       expect(inputEl.value).toBeFalsy();
       expect(inputEl.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to "false".');
+          .toBe(null, 'Expected aria-invalid not to be present.');
 
       inputEl.value = 'not valid';
       fixture.detectChanges();

src/material/input/input.ts

@@ -83,7 +83,7 @@ const _MatInputBase = mixinErrorState(class {
     '[attr.readonly]': 'readonly && !_isNativeSelect || null',
     // Only mark the input as invalid for assistive technology if it has a value since the
     // state usually overlaps with `aria-required` when the input is empty and can be redundant.
-    '[attr.aria-invalid]': 'errorState && !empty',
+    '[attr.aria-invalid]': 'empty ? null : errorState',
     '[attr.aria-required]': 'required',
   },
   providers: [{provide: MatFormFieldControl, useExisting: MatInput}],