Commit d12ada74 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 1804a88e

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

+23 −8
Original line number Diff line number Diff line
@@ -65,12 +65,14 @@ export default class MozMessageBar extends MozLitElement { 
    dismissable: { type: Boolean },

    messageL10nId: { type: String },

    messageL10nArgs: { type: String },

    useAlertRole: { type: Boolean },

  };



  constructor() {

    super();

    this.type = "info";

    this.dismissable = false;

    this.useAlertRole = true;

  }



  onActionSlotchange() {
@@ -85,11 +87,6 @@ export default class MozMessageBar extends MozLitElement { 
    );

  }



  connectedCallback() {

    super.connectedCallback();

    this.setAttribute("role", "alert");

  }



  disconnectedCallback() {

    super.disconnectedCallback();

    this.dispatchEvent(new CustomEvent("message-bar:close"));
@@ -99,6 +96,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) {
@@ -119,7 +127,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 "";

  }
@@ -145,13 +155,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
@@ -455,17 +455,6 @@ 
        this.control.removeNotification(this);

      }



      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 clickjacking delay is active, prevent any "click"/"command" from

        // going through. Also restart the delay if the user tries to click too early.