diff --git a/src/material-experimental/mdc-input/input.spec.ts b/src/material-experimental/mdc-input/input.spec.ts index 4d7a47f0a18b..ac0eb7fa00ac 100644 --- a/src/material-experimental/mdc-input/input.spec.ts +++ b/src/material-experimental/mdc-input/input.spec.ts @@ -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 set `aria-invalid` to true 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('true', 'Expected aria-invalid to be set to "true"'); inputEl.value = 'not valid'; fixture.detectChanges(); diff --git a/src/material-experimental/mdc-input/input.ts b/src/material-experimental/mdc-input/input.ts index c16577810517..329d386fc21a 100644 --- a/src/material-experimental/mdc-input/input.ts +++ b/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 && required) ? null : errorState', '[attr.aria-required]': 'required', }, providers: [{provide: MatFormFieldControl, useExisting: MatInput}], diff --git a/src/material/input/input.spec.ts b/src/material/input/input.spec.ts index 96695bec2f98..d1c8c48a8f60 100644 --- a/src/material/input/input.spec.ts +++ b/src/material/input/input.spec.ts @@ -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 set `aria-invalid` to true 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('true', 'Expected aria-invalid to be set to "true".'); inputEl.value = 'not valid'; fixture.detectChanges(); diff --git a/src/material/input/input.ts b/src/material/input/input.ts index 7a56680b6843..3443a23681d9 100644 --- a/src/material/input/input.ts +++ b/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 && required) ? null : errorState', '[attr.aria-required]': 'required', }, providers: [{provide: MatFormFieldControl, useExisting: MatInput}],