From 40024703cf10e59875f5011810c8cba355169145 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 7 Feb 2019 20:48:02 +0100 Subject: [PATCH] fix(autocomplete): set aria-haspopup (#15079) Based on the [autocomplete example from the a11y guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html), adds `aria-haspopup` to the autocomplete trigger input. --- src/lib/autocomplete/autocomplete-trigger.ts | 1 + src/lib/autocomplete/autocomplete.spec.ts | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 2283fc670ef..0f473911a06 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -105,6 +105,7 @@ export function getMatAutocompleteMissingPanelError(): Error { '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null', '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()', '[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id', + '[attr.aria-haspopup]': '!autocompleteDisabled', // 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 63a1c3ac912..7aea32ce1fb 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -482,6 +482,15 @@ describe('MatAutocomplete', () => { expect(fixture.componentInstance.stateCtrl.value).toBe('hello'); }); + it('should set aria-haspopup depending on whether the autocomplete is disabled', () => { + expect(input.getAttribute('aria-haspopup')).toBe('true'); + + fixture.componentInstance.autocompleteDisabled = true; + fixture.detectChanges(); + + expect(input.getAttribute('aria-haspopup')).toBe('false'); + }); + }); it('should have the correct text direction in RTL', () => {