diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 72e1e99efed0..a9d419492529 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1739,6 +1739,22 @@ describe('MatSelect', () => { .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`); })); + it('should remove aria-owns when the options are not visible', fakeAsync(() => { + const select = fixture.debugElement.query(By.css('mat-select')); + + expect(select.nativeElement.hasAttribute('aria-owns')) + .toBe(true, 'Expected select to have aria-owns while open.'); + + const backdrop = + overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement; + backdrop.click(); + fixture.detectChanges(); + flush(); + + expect(select.nativeElement.hasAttribute('aria-owns')) + .toBe(false, 'Expected select not to have aria-owns when closed.'); + })); + it('should set the option id properly', fakeAsync(() => { let firstOptionID = options[0].id; diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index a9284ac72209..c67f17be4c94 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -188,7 +188,7 @@ export class MatSelectTrigger {} '[attr.aria-required]': 'required.toString()', '[attr.aria-disabled]': 'disabled.toString()', '[attr.aria-invalid]': 'errorState', - '[attr.aria-owns]': '_optionIds', + '[attr.aria-owns]': 'panelOpen ? _optionIds : null', '[attr.aria-multiselectable]': 'multiple', '[attr.aria-describedby]': '_ariaDescribedby || null', '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',