From e36f56376d8289fa04247b7dc8d5a24c9a513a68 Mon Sep 17 00:00:00 2001
From: Emily Nguyen <emilyhuongnguyen@gmail.com>
Date: Wed, 16 Aug 2023 12:28:40 -0700
Subject: [PATCH 1/2] Toggle parent modal aria-owns attribute when autocomplete
 is closed

---
 src/material/autocomplete/autocomplete-trigger.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index a0d6608993d4..ce34d07db029 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -284,6 +284,10 @@ export class MatAutocompleteTrigger
   openPanel(): void {
     this._attachOverlay();
     this._floatLabel();
+    if (this._trackedModal) {
+      const panelId = this.autocomplete.id;
+      addAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
+    }
   }
 
   /** Closes the autocomplete suggestion panel. */
@@ -323,6 +327,12 @@ export class MatAutocompleteTrigger
       // user clicks outside.
       this._changeDetectorRef.detectChanges();
     }
+
+    // Remove aria-owns when the panel is closed and the autocomplete is no longer visible.
+    if (this._trackedModal) {
+      const panelId = this.autocomplete.id;
+      removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
+    }
   }
 
   /**

From 1dceb0aadaae76d9de534b755708bbb49d37d387 Mon Sep 17 00:00:00 2001
From: Emily Nguyen <emilyhuongnguyen@gmail.com>
Date: Wed, 16 Aug 2023 13:08:31 -0700
Subject: [PATCH 2/2] Add unit tests and update comments

---
 .../autocomplete/autocomplete-trigger.ts      |  3 ++-
 .../autocomplete/autocomplete.spec.ts         | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index ce34d07db029..6c36e91d8665 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -284,6 +284,7 @@ export class MatAutocompleteTrigger
   openPanel(): void {
     this._attachOverlay();
     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);
@@ -328,7 +329,7 @@ export class MatAutocompleteTrigger
       this._changeDetectorRef.detectChanges();
     }
 
-    // Remove aria-owns when the panel is closed and the autocomplete is no longer visible.
+    // Remove aria-owns attribute when the autocomplete is no longer visible.
     if (this._trackedModal) {
       const panelId = this.autocomplete.id;
       removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index 27365fa5b76f..3eec12470f53 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -3698,6 +3698,31 @@ describe('MDC-based MatAutocomplete', () => {
         .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', fakeAsync(() => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.componentInstance.trigger.closePanel();
+      fixture.detectChanges();
+
+      const panelId = fixture.componentInstance.autocomplete.id;
+      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', fakeAsync(() => {
+      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);
+    }));
   });
 });