fix(material/autocomplete): remove modal workaround

Now that we're rendering the autocomplete popover inline, we no longer need the `aria-owns` workaround.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -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';
@@ -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. */
@@ -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);
-    }
   }
 
   /**
@@ -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 {
@@ -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.
@@ -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;
-    }
-  }
 }

src/material/autocomplete/autocomplete.spec.ts

@@ -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 {
@@ -16,7 +16,6 @@ import {
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Injector,
   OnDestroy,
   OnInit,
@@ -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 = `
@@ -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>