From f0a0ab109e98a09792ff6d429583fca6eccb93cf Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 24 Jul 2018 22:29:00 +0200 Subject: [PATCH] fix(autocomplete): remove aria-owns attribute while closed (#12333) Removes the `aria-owns` attribute from the autocomplete trigger while the panel is closed. Fixes #12332. --- src/lib/autocomplete/autocomplete-trigger.ts | 2 +- src/lib/autocomplete/autocomplete.spec.ts | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index f60c5ec8bb0..493c12fe7b3 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -103,7 +103,7 @@ export function getMatAutocompleteMissingPanelError(): Error { '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"', '[attr.aria-activedescendant]': 'activeOption?.id', '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()', - '[attr.aria-owns]': 'autocompleteDisabled ? null : autocomplete?.id', + '[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id', // Note: we use `focusin`, as opposed to `focus`, in order to open the panel // a little earlier. This avoids issues where IE delays the focusing of the input. '(focusin)': '_handleFocus()', diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index adca356ce05..1101eb98d85 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1329,7 +1329,16 @@ describe('MatAutocomplete', () => { const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel')).nativeElement; expect(input.getAttribute('aria-owns')) - .toEqual(panel.getAttribute('id'), 'Expected aria-owns to match attached autocomplete.'); + .toBe(panel.getAttribute('id'), 'Expected aria-owns to match attached autocomplete.'); + }); + + it('should not set aria-owns while the autocomplete is closed', () => { + expect(input.getAttribute('aria-owns')).toBeFalsy(); + + fixture.componentInstance.trigger.openPanel(); + fixture.detectChanges(); + + expect(input.getAttribute('aria-owns')).toBeTruthy(); }); it('should restore focus to the input when clicking to select a value', fakeAsync(() => {