[PM-7256] Input element loses focus when inline menu is opened in Safari (#8600)

apps/browser/src/autofill/overlay/pages/list/__snapshots__/autofill-overlay-list.spec.ts.snap

@@ -2,9 +2,7 @@
 
 exports[`AutofillOverlayList initAutofillOverlayList the list of ciphers for an authenticated user creates the view for a list of ciphers 1`] = `
 <div
-  aria-modal="true"
   class="overlay-list-container theme_light"
-  role="dialog"
 >
   <ul
     class="overlay-actions-list"
@@ -436,9 +434,7 @@ exports[`AutofillOverlayList initAutofillOverlayList the list of ciphers for an
 
 exports[`AutofillOverlayList initAutofillOverlayList the locked overlay for an unauthenticated user creates the views for the locked overlay 1`] = `
 <div
-  aria-modal="true"
   class="overlay-list-container theme_light"
-  role="dialog"
 >
   <div
     class="locked-overlay overlay-list-message"
@@ -490,9 +486,7 @@ exports[`AutofillOverlayList initAutofillOverlayList the locked overlay for an u
 
 exports[`AutofillOverlayList initAutofillOverlayList the overlay with an empty list of ciphers creates the views for the no results overlay 1`] = `
 <div
-  aria-modal="true"
   class="overlay-list-container theme_light"
-  role="dialog"
 >
   <div
     class="no-items overlay-list-message"

apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts

@@ -312,6 +312,24 @@ describe("AutofillOverlayList", () => {
     });
 
     describe("directing user focus into the overlay list", () => {
+      it("sets ARIA attributes that define the list as a `dialog` to screen reader users", () => {
+        postWindowMessage(
+          createInitAutofillOverlayListMessageMock({
+            authStatus: AuthenticationStatus.Locked,
+            cipherList: [],
+          }),
+        );
+        const overlayContainerSetAttributeSpy = jest.spyOn(
+          autofillOverlayList["overlayListContainer"],
+          "setAttribute",
+        );
+
+        postWindowMessage({ command: "focusOverlayList" });
+
+        expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("role", "dialog");
+        expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("aria-modal", "true");
+      });
+
       it("focuses the unlock button element if the user is not authenticated", () => {
         postWindowMessage(
           createInitAutofillOverlayListMessageMock({

apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts

@@ -59,8 +59,6 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
 
     this.overlayListContainer = globalThis.document.createElement("div");
     this.overlayListContainer.classList.add("overlay-list-container", themeClass);
-    this.overlayListContainer.setAttribute("role", "dialog");
-    this.overlayListContainer.setAttribute("aria-modal", "true");
     this.resizeObserver.observe(this.overlayListContainer);
 
     this.shadowDom.append(linkElement, this.overlayListContainer);
@@ -487,6 +485,9 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
    * the first cipher button.
    */
   private focusOverlayList() {
+    this.overlayListContainer.setAttribute("role", "dialog");
+    this.overlayListContainer.setAttribute("aria-modal", "true");
+
     const unlockButtonElement = this.overlayListContainer.querySelector(
       "#unlock-button",
     ) as HTMLElement;