Skip to content

Commit 4002470

Browse files
crisbetojelbourn
authored andcommitted
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.
1 parent b10dd04 commit 4002470

File tree

2 files changed

+10
-0
lines changed

2 files changed

+10
-0
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
105105
'[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',
106106
'[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()',
107107
'[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id',
108+
'[attr.aria-haspopup]': '!autocompleteDisabled',
108109
// Note: we use `focusin`, as opposed to `focus`, in order to open the panel
109110
// a little earlier. This avoids issues where IE delays the focusing of the input.
110111
'(focusin)': '_handleFocus()',

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,15 @@ describe('MatAutocomplete', () => {
482482
expect(fixture.componentInstance.stateCtrl.value).toBe('hello');
483483
});
484484

485+
it('should set aria-haspopup depending on whether the autocomplete is disabled', () => {
486+
expect(input.getAttribute('aria-haspopup')).toBe('true');
487+
488+
fixture.componentInstance.autocompleteDisabled = true;
489+
fixture.detectChanges();
490+
491+
expect(input.getAttribute('aria-haspopup')).toBe('false');
492+
});
493+
485494
});
486495

487496
it('should have the correct text direction in RTL', () => {

0 commit comments

Comments
 (0)