Commit 681f5728 authored by henry's avatar henry Committed by morgan
Browse files

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.
parent 379a2960

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

+23 −8
Original line number Diff line number Diff line
@@ -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

+0 −11
Original line number Diff line number Diff line
@@ -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;