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}],