[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-128.2.0esr-14.0-1] Bug 43072: Add aria label and description to moz-message-bar.

[morgan (@morgan)]

morgan pushed to branch tor-browser-128.2.0esr-14.0-1 at The Tor Project / Applications / Tor Browser


Commits:
d1fee199 by Henry Wilkes at 2024-09-16T17:01:00+00:00
Bug 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.

- - - - -


2 changed files:

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


Changes:

=====================================
toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
=====================================
@@ -62,6 +62,7 @@ export default class MozMessageBar extends MozLitElement {
     dismissable: { type: Boolean },
     messageL10nId: { type: String },
     messageL10nArgs: { type: String },
+    useAlertRole: { type: Boolean },
   };
 
   constructor() {
@@ -69,6 +70,7 @@ export default class MozMessageBar extends MozLitElement {
     window.MozXULElement?.insertFTLIfNeeded("toolkit/global/mozMessageBar.ftl");
     this.type = "info";
     this.dismissable = false;
+    this.useAlertRole = true;
   }
 
   onSlotchange() {
@@ -76,11 +78,6 @@ export default class MozMessageBar extends MozLitElement {
     this.actionsEl.classList.toggle("active", actions.length);
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "alert");
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.dispatchEvent(new CustomEvent("message-bar:close"));
@@ -90,6 +87,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) {
@@ -110,7 +118,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 "";
   }
@@ -136,13 +146,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
=====================================
@@ -703,17 +703,6 @@
         }
       }
 
-      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;



View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/d1fee199e7c35f42dca1d75eb12ecb0281d9ec3c

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/d1fee199e7c35f42dca1d75eb12ecb0281d9ec3c
You're receiving this email because of your account on gitlab.torproject.org.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tor-commits/attachments/20240916/2a1467a3/attachment-0001.htm>