GitLab

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.

@@ -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">

@@ -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.

morgan pushed to branch mullvad-browser-153.0esr-16.0-1 at The Tor Project / Applications / Mullvad Browser

Commits:

2 changed files:

Changes: