Commit 14873cf2 authored by henry's avatar henry Committed by morgan
Browse files

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.
parent 5bff9b07

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

+16 −18
Original line number Diff line number Diff line
@@ -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

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