[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]

[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-128.2.0esr-14.0-1] Bug 43072: Add aria label and description to moz-message-bar.

Title: GitLab

morgan pushed to branch tor-browser-128.2.0esr-14.0-1 at The Tor Project / Applications / Tor Browser

Commits:

  • d1fee199
    by Henry Wilkes at 2024-09-16T17:01:00+00:00 
    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.

2 changed files:

Changes:

  • toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
    ... ... @@ -62,6 +62,7 @@ export default class MozMessageBar extends MozLitElement {
    62 62 
         dismissable: { type: Boolean },
    63 63 
         messageL10nId: { type: String },
    64 64 
         messageL10nArgs: { type: String },
    65 
    +    useAlertRole: { type: Boolean },
    65 66 
       };
    66 67
    67 68 
       constructor() {
    ... ... @@ -69,6 +70,7 @@ export default class MozMessageBar extends MozLitElement {
    69 70 
         window.MozXULElement?.insertFTLIfNeeded("toolkit/global/mozMessageBar.ftl");
    70 71 
         this.type = "info";
    71 72 
         this.dismissable = false;
    73 
    +    this.useAlertRole = true;
    72 74 
       }
    73 75
    74 76 
       onSlotchange() {
    ... ... @@ -76,11 +78,6 @@ export default class MozMessageBar extends MozLitElement {
    76 78 
         this.actionsEl.classList.toggle("active", actions.length);
    77 79 
       }
    78 80
    79 
    -  connectedCallback() {
    80 
    -    super.connectedCallback();
    81 
    -    this.setAttribute("role", "alert");
    82 
    -  }
    83 
    -
    84 81 
       disconnectedCallback() {
    85 82 
         super.disconnectedCallback();
    86 83 
         this.dispatchEvent(new CustomEvent("message-bar:close"));
    ... ... @@ -90,6 +87,17 @@ export default class MozMessageBar extends MozLitElement {
    90 87 
         return this.supportLinkSlot.assignedElements();
    91 88 
       }
    92 89
    90 
    +  setAlertRole() {
    91 
    +    // Wait a little for this to render before setting the role for more
    92 
    +    // consistent alerts to screen readers.
    93 
    +    this.useAlertRole = false;
    94 
    +    window.requestAnimationFrame(() => {
    95 
    +      window.requestAnimationFrame(() => {
    96 
    +        this.useAlertRole = true;
    97 
    +      });
    98 
    +    });
    99 
    +  }
    100 
    +
    93 101 
       iconTemplate() {
    94 102 
         let iconData = messageTypeToIconData[this.type];
    95 103 
         if (iconData) {
    ... ... @@ -110,7 +118,9 @@ export default class MozMessageBar extends MozLitElement {
    110 118
    111 119 
       headingTemplate() {
    112 120 
         if (this.heading) {
    113 
    -      return html`<strong class="heading">${this.heading}</strong>`;
    121 
    +      return html`
    122 
    +        <strong id="heading" class="heading">${this.heading}</strong>
    123 
    +      `;
    114 124 
         }
    115 125 
         return "";
    116 126 
       }
    ... ... @@ -136,13 +146,18 @@ export default class MozMessageBar extends MozLitElement {
    136 146 
             rel="stylesheet"
    137 147 
             href=""
    138 148 
           />
    139 
    -      <div class="container">
    149 
    +      <div
    150 
    +        class="container"
    151 
    +        role=${ifDefined(this.useAlertRole ? "alert" : undefined)}
    152 
    +        aria-labelledby=${this.heading ? "heading" : "content"}
    153 
    +        aria-describedby=${ifDefined(this.heading ? "content" : undefined)}
    154 
    +      >
    140 155 
             <div class="content">
    141 156 
               <div class="text-container">
    142 157 
                 ${this.iconTemplate()}
    143 158 
                 <div class="text-content">
    144 159 
                   ${this.headingTemplate()}
    145 
    -              <div>
    160 
    +              <div id="content">
    146 161 
                     <span
    147 162 
                       class="message"
    148 163 
                       data-l10n-id=${ifDefined(this.messageL10nId)}

  • toolkit/content/widgets/notificationbox.js
    ... ... @@ -703,17 +703,6 @@
    703 703 
             }
    704 704 
           }
    705 705
    706 
    -      setAlertRole() {
    707 
    -        // Wait a little for this to render before setting the role for more
    708 
    -        // consistent alerts to screen readers.
    709 
    -        this.removeAttribute("role");
    710 
    -        window.requestAnimationFrame(() => {
    711 
    -          window.requestAnimationFrame(() => {
    712 
    -            this.setAttribute("role", "alert");
    713 
    -          });
    714 
    -        });
    715 
    -      }
    716 
    -
    717 706 
           handleEvent(e) {
    718 707 
             if (e.type == "click" && e.target.localName != "label") {
    719 708 
               return;

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help 

    _______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits