morgan pushed to branch mullvad-browser-153.0esr-16.0-1 at The Tor Project / Applications / Mullvad Browser Commits: 14873cf2 by Henry Wilkes at 2026-08-04T13:01:38+00:00 fixup! BB 43072: Add aria label and description to moz-message-bar. BB 45186: Remove duplicate alert roles. We also restrict the `aria-labelledby` and `aria-describedby` attributes to only be used with the "alert" role. - - - - - 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 ===================================== @@ -65,8 +65,9 @@ export default class MozMessageBar extends MozLitElement { supportPage: { type: String }, messageL10nId: { type: String }, messageL10nArgs: { type: String }, - role: { type: String, reflect: true }, - useAlertRole: { type: Boolean }, + // Move the role from the widget to its shadow root, where we can apply + // aria-labelledby and aria-describedby. tor-browser#45186. + role: { type: String, mapped: true }, }; constructor() { @@ -127,8 +128,6 @@ export default class MozMessageBar extends MozLitElement { * @type {string} */ this.role = "alert"; - - this.useAlertRole = true; } onActionSlotchange() { @@ -170,17 +169,6 @@ 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) { @@ -224,6 +212,16 @@ export default class MozMessageBar extends MozLitElement { } render() { + let ariaLabelledBy; + let ariaDescribedBy; + if (this.role === "alert") { + if (this.heading) { + ariaLabelledBy = "heading"; + ariaDescribedBy = "content"; + } else { + ariaLabelledBy = "content"; + } + } return html` <link rel="stylesheet" @@ -231,9 +229,9 @@ export default class MozMessageBar extends MozLitElement { /> <div class="container" - role=${ifDefined(this.useAlertRole ? "alert" : undefined)} - aria-labelledby=${this.heading ? "heading" : "content"} - aria-describedby=${ifDefined(this.heading ? "content" : undefined)} + role=${ifDefined(this.role || undefined)} + aria-labelledby=${ifDefined(ariaLabelledBy)} + aria-describedby=${ifDefined(ariaDescribedBy)} > ${this.iconTemplate()} <div class="content"> ===================================== toolkit/content/widgets/notificationbox.js ===================================== @@ -492,6 +492,20 @@ this.control.removeNotification(this); } + setAlertRole() { + // Wait a little for this to render before setting the role for more + // consistent alerts to screen readers. + // tor-browser#45186: "role" is a mapped attribute, so `removeAttribute` + // will go undetected by the moz-message-bar widget. Instead we set the + // role property directly. + this.role = undefined; + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + this.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. View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/1487... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/commit/1487... You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications: https://gitlab.torproject.org/-/profile/notifications | Help: https://gitlab.torproject.org/help