Skip to content

Commit c58c0eb

Browse files
committed
fix(autocomplete): adding aria-activedescendant while closed if autoActiveFirstOption is enabled
Fixes the autocomplete trigger setting its `aria-activedescendant` attribute while the panel is closed and the options aren't in the DOM, if the `autoActiveFirstOption` is enabled. Fixes #14453.
1 parent e9466a4 commit c58c0eb

File tree

2 files changed

+24
-1
lines changed

2 files changed

+24
-1
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
102102
'[attr.autocomplete]': 'autocompleteAttribute',
103103
'[attr.role]': 'autocompleteDisabled ? null : "combobox"',
104104
'[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"',
105-
'[attr.aria-activedescendant]': 'activeOption?.id',
105+
'[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',
108108
// Note: we use `focusin`, as opposed to `focus`, in order to open the panel

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1658,6 +1658,29 @@ describe('MatAutocomplete', () => {
16581658

16591659
expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
16601660
.toContain('mat-active', 'Expected first option to be highlighted.');
1661+
}));
1662+
1663+
it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption',
1664+
fakeAsync(() => {
1665+
const input: HTMLElement = fixture.nativeElement.querySelector('input');
1666+
1667+
expect(input.hasAttribute('aria-activedescendant'))
1668+
.toBe(false, 'Expected no active descendant on init.');
1669+
1670+
fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
1671+
fixture.componentInstance.trigger.openPanel();
1672+
fixture.detectChanges();
1673+
zone.simulateZoneExit();
1674+
fixture.detectChanges();
1675+
1676+
expect(input.getAttribute('aria-activedescendant'))
1677+
.toBeTruthy('Expected active descendant while open.');
1678+
1679+
fixture.componentInstance.trigger.closePanel();
1680+
fixture.detectChanges();
1681+
1682+
expect(input.hasAttribute('aria-activedescendant'))
1683+
.toBe(false, 'Expected no active descendant when closed.');
16611684
}));
16621685

16631686
it('should be able to configure preselecting the first option globally', fakeAsync(() => {

0 commit comments

Comments
 (0)