Commit 19c788d3 authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

BB 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 d8e9de3c

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

+23 −4
Original line number Diff line number Diff line
@@ -65,7 +65,9 @@ export default class MozMessageBar extends MozLitElement { 
    supportPage: { type: String },

    messageL10nId: { type: String },

    messageL10nArgs: { type: String },

    role: { type: String, reflect: true },

    // 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() {
@@ -187,7 +189,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 "";

  }
@@ -208,18 +212,33 @@ 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"

        href="chrome://global/content/elements/moz-message-bar.css"

      />

      <div class="container">

      <div

        class="container"

        role=${ifDefined(this.role || undefined)}

        aria-labelledby=${ifDefined(ariaLabelledBy)}

        aria-describedby=${ifDefined(ariaDescribedBy)}

      >

        ${this.iconTemplate()}

        <div class="content">

          <div class="text-container">

            <div class="text-content">

              ${this.headingTemplate()}

              <div>

              <div id="content">

                <slot name="message">

                  <span

                    id="message"

toolkit/content/widgets/notificationbox.js

+5 −2
Original line number Diff line number Diff line
@@ -495,10 +495,13 @@ 
      setAlertRole() {

        // Wait a little for this to render before setting the role for more

        // consistent alerts to screen readers.

        this.removeAttribute("role");

        // 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.setAttribute("role", "alert");

            this.role = "alert";

          });

        });

      }