morgan pushed to branch mullvad-browser-128.2.0esr-14.0-1 at The Tor Project / Applications / Mullvad Browser Commits: af82c3ab by Henry Wilkes at 2024-09-16T17:20:18+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/mullvad-browser/-/commit/af82... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/af82... You're receiving this email because of your account on gitlab.torproject.org.