Skip to content

Clean up modal workarounds #33062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crisbeto merged 2 commits into from
Apr 10, 2026
+3 −294
Merged

Clean up modal workarounds #33062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06fe578
fix(material/autocomplete): remove modal workaround
crisbeto Apr 9, 2026
300f6c4
fix(material/select): remove modal workaround
crisbeto Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 0 additions & 75 deletions src/material/autocomplete/autocomplete-trigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
* found in the LICENSE file at https://angular.dev/license
*/

import {addAriaReferencedId, removeAriaReferencedId} from '@angular/cdk/a11y';
import {Directionality} from '@angular/cdk/bidi';
import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW, hasModifierKey} from '@angular/cdk/keycodes';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
Expand Down Expand Up @@ -269,7 +268,6 @@ export class MatAutocompleteTrigger
this._componentDestroyed = true;
this._destroyPanel();
this._closeKeyEventStream.complete();
this._clearFromModal();
}

/** Whether or not the autocomplete panel is open. */
Expand Down Expand Up @@ -327,11 +325,6 @@ export class MatAutocompleteTrigger
// user clicks outside.
this._changeDetectorRef.detectChanges();
}

// Remove aria-owns attribute when the autocomplete is no longer visible.
if (this._trackedModal) {
removeAriaReferencedId(this._trackedModal, 'aria-owns', this.autocomplete.id);
}
}

/**
Expand Down Expand Up @@ -756,11 +749,6 @@ export class MatAutocompleteTrigger
private _openPanelInternal(valueOnAttach = this._element.nativeElement.value) {
this._attachOverlay(valueOnAttach);
this._floatLabel();
// Add aria-owns attribute when the autocomplete becomes visible.
if (this._trackedModal) {
const panelId = this.autocomplete.id;
addAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
}
}

private _attachOverlay(valueOnAttach: string): void {
Expand Down Expand Up @@ -827,7 +815,6 @@ export class MatAutocompleteTrigger
this.autocomplete._latestOpeningTrigger = this;
this.autocomplete._setColor(this._formField?.color);
this._updatePanelState();
this._applyModalPanelOwnership();

// We need to do an extra `panelOpen` check in here, because the
// autocomplete won't be shown if there are no options.
Expand Down Expand Up @@ -1036,66 +1023,4 @@ export class MatAutocompleteTrigger
}
}
}

/**
* Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
* inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
* panel. Track the modal we have changed so we can undo the changes on destroy.
*/
private _trackedModal: Element | null = null;

/**
* If the autocomplete trigger is inside of an `aria-modal` element, connect
* that modal to the options panel with `aria-owns`.
*
* For some browser + screen reader combinations, when navigation is inside
* of an `aria-modal` element, the screen reader treats everything outside
* of that modal as hidden or invisible.
*
* This causes a problem when the combobox trigger is _inside_ of a modal, because the
* options panel is rendered _outside_ of that modal, preventing screen reader navigation
* from reaching the panel.
*
* We can work around this issue by applying `aria-owns` to the modal with the `id` of
* the options panel. This effectively communicates to assistive technology that the
* options panel is part of the same interaction as the modal.
*
* At time of this writing, this issue is present in VoiceOver.
* See https://github.com/angular/components/issues/20694
*/
private _applyModalPanelOwnership() {
// TODO(http://github.com/angular/components/issues/26853): consider de-duplicating this with
// the `LiveAnnouncer` and any other usages.
//
// Note that the selector here is limited to CDK overlays at the moment in order to reduce the
// section of the DOM we need to look through. This should cover all the cases we support, but
// the selector can be expanded if it turns out to be too narrow.
const modal = this._element.nativeElement.closest(
'body > .cdk-overlay-container [aria-modal="true"]',
);

if (!modal) {
// Most commonly, the autocomplete trigger is not inside a modal.
return;
}

const panelId = this.autocomplete.id;

if (this._trackedModal) {
removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
}

addAriaReferencedId(modal, 'aria-owns', panelId);
this._trackedModal = modal;
}

/** Clears the references to the listbox overlay element from the modal it was added to. */
private _clearFromModal() {
if (this._trackedModal) {
const panelId = this.autocomplete.id;

removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
this._trackedModal = null;
}
}
}
91 changes: 1 addition & 90 deletions src/material/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Direction} from '@angular/cdk/bidi';
import {DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW} from '@angular/cdk/keycodes';
import {OverlayModule, createCloseScrollStrategy} from '@angular/cdk/overlay';
import {createCloseScrollStrategy} from '@angular/cdk/overlay';
import {_supportsShadowDom} from '@angular/cdk/platform';
import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {
Expand All @@ -16,7 +16,6 @@ import {
import {
ChangeDetectionStrategy,
Component,
ElementRef,
Injector,
OnDestroy,
OnInit,
Expand Down Expand Up @@ -3953,51 +3952,6 @@ describe('MatAutocomplete', () => {
expect(document.querySelectorAll('.mat-pseudo-checkbox').length).toBe(0);
});
});

describe('when used inside a modal', () => {
let fixture: ComponentFixture<AutocompleteInsideAModal>;

beforeEach(() => {
fixture = createComponent(AutocompleteInsideAModal);
fixture.detectChanges();
});

it('should add the id of the autocomplete panel to the aria-owns of the modal', () => {
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();

const panelId = fixture.componentInstance.autocomplete.id;
const modalElement = fixture.componentInstance.modal.nativeElement;

expect(modalElement.getAttribute('aria-owns')?.split(' '))
.withContext('expecting modal to own the autocommplete panel')
.toContain(panelId);
});

it('should remove the aria-owns attribute of the modal when the autocomplete panel closes', () => {
fixture.componentInstance.trigger.openPanel();
fixture.componentInstance.trigger.closePanel();
fixture.detectChanges();

const modalElement = fixture.componentInstance.modal.nativeElement;

expect(modalElement.getAttribute('aria-owns')).toBeFalsy();
});

it('should readd the aria-owns attribute of the modal when the autocomplete panel opens again', () => {
fixture.componentInstance.trigger.openPanel();
fixture.componentInstance.trigger.closePanel();
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();

const panelId = fixture.componentInstance.autocomplete.id;
const modalElement = fixture.componentInstance.modal.nativeElement;

expect(modalElement.getAttribute('aria-owns')?.split(' '))
.withContext('expecting modal to own the autocommplete panel')
.toContain(panelId);
});
});
});

const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
Expand Down Expand Up @@ -4547,49 +4501,6 @@ class AutocompleteWithActivatedEvent {
@ViewChildren(MatOption) options!: QueryList<MatOption>;
}

@Component({
template: `
<button cdkOverlayOrigin #trigger="cdkOverlayOrigin">open dialog</button>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOrigin]="trigger">
<div role="dialog" [attr.aria-modal]="'true'" #modal>
<mat-form-field>
<mat-label>Food</mat-label>
<input matInput [matAutocomplete]="reactiveAuto" [formControl]="formControl">
</mat-form-field>
<mat-autocomplete #reactiveAuto="matAutocomplete">
@for (food of foods; track food; let index = $index) {
<mat-option [value]="food">{{food.viewValue}}</mat-option>
}
</mat-autocomplete>
</div>
</ng-template>
`,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOption,
MatInputModule,
ReactiveFormsModule,
OverlayModule,
],
changeDetection: ChangeDetectionStrategy.Eager,
})
class AutocompleteInsideAModal {
foods = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
];

formControl = new FormControl();

@ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;
@ViewChild(MatAutocompleteTrigger) trigger!: MatAutocompleteTrigger;
@ViewChildren(MatOption) options!: QueryList<MatOption>;
@ViewChild('modal') modal!: ElementRef;
}

@Component({
template: `
<mat-form-field>
Expand Down
56 changes: 1 addition & 55 deletions src/material/select/select.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
TAB,
UP_ARROW,
} from '@angular/cdk/keycodes';
import {OverlayModule, createCloseScrollStrategy} from '@angular/cdk/overlay';
import {createCloseScrollStrategy} from '@angular/cdk/overlay';
import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {
createKeyboardEvent,
Expand All @@ -30,7 +30,6 @@ import {
ChangeDetectorRef,
Component,
DebugElement,
ElementRef,
Injector,
OnInit,
QueryList,
Expand Down Expand Up @@ -1097,27 +1096,6 @@ describe('MatSelect', () => {
});
});

describe('for select inside a modal', () => {
let fixture: ComponentFixture<SelectInsideAModal>;

beforeEach(() => {
fixture = TestBed.createComponent(SelectInsideAModal);
fixture.detectChanges();
});

it('should add the id of the select panel to the aria-owns of the modal', () => {
fixture.componentInstance.select.open();
fixture.detectChanges();

const panelId = `${fixture.componentInstance.select.id}-panel`;
const modalElement = fixture.componentInstance.modal.nativeElement;

expect(modalElement.getAttribute('aria-owns')?.split(' '))
.withContext('expecting modal to own the select panel')
.toContain(panelId);
});
});

describe('for options', () => {
let fixture: ComponentFixture<BasicSelect>;
let trigger: HTMLElement;
Expand Down Expand Up @@ -5482,35 +5460,3 @@ class BasicSelectWithFirstAndLastOptionDisabled {
@ViewChild(MatSelect, {static: true}) select!: MatSelect;
@ViewChildren(MatOption) options!: QueryList<MatOption>;
}

@Component({
template: `
<button cdkOverlayOrigin #trigger="cdkOverlayOrigin">open dialog</button>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]="true"
[cdkConnectedOverlayOrigin]="trigger">
<div role="dialog" [attr.aria-modal]="'true'" #modal>
<mat-form-field>
<mat-label>Select a food</mat-label>
<mat-select placeholder="Food" ngModel>
@for (food of foods; track food) {
<mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
</ng-template>
`,
imports: [MatSelect, MatOption, MatFormFieldModule, FormsModule, OverlayModule],
changeDetection: ChangeDetectionStrategy.Eager,
})
class SelectInsideAModal {
foods = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
];

@ViewChild(MatSelect) select!: MatSelect;
@ViewChildren(MatOption) options!: QueryList<MatOption>;
@ViewChild('modal') modal!: ElementRef;
}
Loading
Loading