BB 43072: Add aria label and description to moz-message-bar.

Ensures that moz-message-bar, including notifications, are announced on
Orca.

This addresses upstream bugzilla bug 1895857 and should likely be
replaced when it is fixed.

toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs

@@ -65,12 +65,14 @@ export default class MozMessageBar extends MozLitElement {
     dismissable: { type: Boolean },
     messageL10nId: { type: String },
     messageL10nArgs: { type: String },
+    useAlertRole: { type: Boolean },
   };
 
   constructor() {
     super();
     this.type = "info";
     this.dismissable = false;
+    this.useAlertRole = true;
   }
 
   onActionSlotchange() {
@@ -85,11 +87,6 @@ export default class MozMessageBar extends MozLitElement {
     );
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "alert");
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.dispatchEvent(new CustomEvent("message-bar:close"));
@@ -99,6 +96,17 @@ export default class MozMessageBar extends MozLitElement {
     return this.supportLinkSlot.assignedElements();
   }
 
+  setAlertRole() {
+    // Wait a little for this to render before setting the role for more
+    // consistent alerts to screen readers.
+    this.useAlertRole = false;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        this.useAlertRole = true;
+      });
+    });
+  }
+
   iconTemplate() {
     let iconData = messageTypeToIconData[this.type];
     if (iconData) {
@@ -119,7 +127,9 @@ export default class MozMessageBar extends MozLitElement {
 
   headingTemplate() {
     if (this.heading) {
-      return html`<strong class="heading">${this.heading}</strong>`;
+      return html`
+        <strong id="heading" class="heading">${this.heading}</strong>
+      `;
     }
     return "";
   }
@@ -145,13 +155,18 @@ export default class MozMessageBar extends MozLitElement {
         rel="stylesheet"
         href="chrome://global/content/elements/moz-message-bar.css"
       />
-      <div class="container">
+      <div
+        class="container"
+        role=${ifDefined(this.useAlertRole ? "alert" : undefined)}
+        aria-labelledby=${this.heading ? "heading" : "content"}
+        aria-describedby=${ifDefined(this.heading ? "content" : undefined)}
+      >
         <div class="content">
           <div class="text-container">
             ${this.iconTemplate()}
             <div class="text-content">
               ${this.headingTemplate()}
-              <div>
+              <div id="content">
                 <span
                   class="message"
                   data-l10n-id=${ifDefined(this.messageL10nId)}

toolkit/content/widgets/notificationbox.js

@@ -427,17 +427,6 @@
         this.control.removeNotification(this);
       }
 
-      setAlertRole() {
-        // Wait a little for this to render before setting the role for more
-        // consistent alerts to screen readers.
-        this.removeAttribute("role");
-        window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
-            this.setAttribute("role", "alert");
-          });
-        });
-      }
-
       handleEvent(e) {
         if (e.type == "click" && e.target.localName != "label") {
           return;