Bug 1860585 - Focus close button after opting into shopping. r=ayeddi

Differential Revision: https://phabricator.services.mozilla.com/D195814

browser/components/shopping/ShoppingSidebarChild.sys.mjs

@@ -177,7 +177,7 @@ export class ShoppingSidebarChild extends RemotePageChild {
     // Force re-fetching things if needed by clearing the last product URI:
     this.#productURI = null;
     // Then let content know.
-    this.updateContent();
+    this.updateContent({ focusCloseButton: true });
   }
 
   adsEnabledByUserChanged() {
@@ -211,6 +211,7 @@ export class ShoppingSidebarChild extends RemotePageChild {
   async updateContent({
     haveUpdatedURI = false,
     isPolledRequest = false,
+    focusCloseButton = false,
   } = {}) {
     // updateContent is an async function, and when we're off making requests or doing
     // other things asynchronously, the actor can be destroyed, the user
@@ -241,6 +242,7 @@ export class ShoppingSidebarChild extends RemotePageChild {
         showOnboarding: !this.canFetchAndShowData,
         data: null,
         recommendationData: null,
+        focusCloseButton,
       });
     }
     if (this.canFetchAndShowData) {

browser/components/shopping/content/shopping-container.mjs

@@ -55,6 +55,7 @@ export class ShoppingContainer extends MozLitElement {
       shoppingMessageBarEl: "shopping-message-bar",
       recommendedAdEl: "recommended-ad",
       loadingEl: "#loading-wrapper",
+      closeButtonEl: "#close-button",
     };
   }
 
@@ -82,6 +83,12 @@ export class ShoppingContainer extends MozLitElement {
     );
   }
 
+  updated() {
+    if (this.focusCloseButton) {
+      this.closeButtonEl.focus();
+    }
+  }
+
   async _update({
     data,
     showOnboarding,
@@ -91,6 +98,7 @@ export class ShoppingContainer extends MozLitElement {
     adsEnabledByUser,
     isAnalysisInProgress,
     analysisProgress,
+    focusCloseButton,
   }) {
     // If we're not opted in or there's no shopping URL in the main browser,
     // the actor will pass `null`, which means this will clear out any existing
@@ -104,6 +112,7 @@ export class ShoppingContainer extends MozLitElement {
     this.adsEnabled = adsEnabled;
     this.adsEnabledByUser = adsEnabledByUser;
     this.analysisProgress = analysisProgress;
+    this.focusCloseButton = focusCloseButton;
   }
 
   _updateRecommendations({ recommendationData }) {
@@ -338,7 +347,7 @@ export class ShoppingContainer extends MozLitElement {
             @click=${this.handleClick}
           ></button>
         </div>
-        <div id="content" aria-busy=${!this.data}>
+        <div id="content" aria-live="polite" aria-busy=${!this.data}>
           <slot name="multi-stage-message-slot"></slot>
           ${sidebarContent} ${!hideFooter ? this.getFooterTemplate() : null}
         </div>