tor-browser

commit f2ad98ff0b52cdbecad1499dc6cc31fa2293aa06
parent 2fd2434c01c465dd6de177392e7882a12d3af59a
Author: Henry Wilkes <henry@torproject.org>
Date:   Thu, 12 Sep 2024 09:53:22 +0100

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.

Diffstat:
M
toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
 | 
32
++++++++++++++++++++++++--------
M
toolkit/content/widgets/notificationbox.js
 | 
11
-----------

2 files changed, 24 insertions(+), 19 deletions(-)
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
@@ -65,6 +65,7 @@ export default class MozMessageBar extends MozLitElement {
     supportPage: { type: String },
     messageL10nId: { type: String },
     messageL10nArgs: { type: String },
+    useAlertRole: { type: Boolean },
   };
 
   constructor() {
@@ -118,6 +119,8 @@ export default class MozMessageBar extends MozLitElement {
      * @type {string | undefined}
      */
     this.supportPage = undefined;
+
+    this.useAlertRole = true;
   }
 
   onActionSlotchange() {
@@ -132,11 +135,6 @@ export default class MozMessageBar extends MozLitElement {
     );
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "alert");
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.dispatchEvent(new CustomEvent("message-bar:close"));
@@ -164,6 +162,17 @@ export default class MozMessageBar extends MozLitElement {
     ></slot>`;
   }
 
+  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) {
@@ -184,7 +193,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 "";
   }
@@ -210,13 +221,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">
                 <slot name="message">
                   <span
                     id="message"
diff --git a/toolkit/content/widgets/notificationbox.js b/toolkit/content/widgets/notificationbox.js
@@ -486,17 +486,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 clickjacking delay is active, prevent any "click"/"command" from
         // going through. Also restart the delay if the user tries to click too early.