Bug 1873049 - Provide accessible names to both tabs overflow scrollbuttons. r=dao,reusable-components-reviewers,eemeli

`scrollbutton-down` and `scrollbutton-up` toolbarbuttons are not labeled and it would prevent users of assistive technology from knowing their purpose and, for instance, speech-to-text software users won't be able to activate them by calling their name and screen reader users won't know what these controls are expected to do, when passing through them in a browse mode or in a list of buttons/controls.

Differential Revision: https://phabricator.services.mozilla.com/D197705

Author: anna-yeddi

browser/base/content/test/tabs/browser.toml

@@ -236,7 +236,6 @@ support-files = [
 ]
 
 ["browser_overflowScroll.js"]
-fail-if = ["a11y_checks"] # Bugs 1854233 and 1873049 scrollbutton-down/up are not labeled
 skip-if = [
   "win11_2009", # Bug 1797751
 ]

toolkit/content/widgets/arrowscrollbox.js

@@ -21,15 +21,15 @@
       return `
       <html:link rel="stylesheet" href="chrome://global/skin/toolbarbutton.css"/>
       <html:link rel="stylesheet" href="chrome://global/skin/arrowscrollbox.css"/>
-      <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false"/>
+      <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-up"/>
       <spacer part="overflow-start-indicator"/>
       <box class="scrollbox-clip" part="scrollbox-clip" flex="1">
         <scrollbox part="scrollbox" flex="1">
           <html:slot/>
         </scrollbox>
       </box>
       <spacer part="overflow-end-indicator"/>
-      <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false"/>
+      <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false" data-l10n-id="overflow-scroll-button-down"/>
     `;
     }
 
@@ -43,6 +43,8 @@
       this._scrollButtonDown =
         this.shadowRoot.getElementById("scrollbutton-down");
 
+      MozXULElement.insertFTLIfNeeded("toolkit/global/arrowscrollbox.ftl");
+
       this._arrowScrollAnim = {
         scrollbox: this,
         requestHandle: 0,
@@ -134,6 +136,8 @@
       }
       this.hasConnected = true;
 
+      document.l10n.connectRoot(this.shadowRoot);
+
       if (!this.hasAttribute("smoothscroll")) {
         this.smoothScroll = Services.prefs.getBoolPref(
           "toolkit.scrollbox.smoothScroll",
@@ -639,6 +643,7 @@
         this._scrollTimer.cancel();
         this._scrollTimer = null;
       }
+      document.l10n.disconnectRoot(this.shadowRoot);
     }
 
     on_wheel(event) {

toolkit/locales/en-US/toolkit/global/arrowscrollbox.ftl

@@ -0,0 +1,20 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+### This file contains the entities needed to use the Arrowscrollbox component.
+### For example, Arrowscrollboxes are used in Tabs Toolbar when there are
+### multiple tabs opened and in the overflowing menus.
+
+# This button is shown at the beginning of the overflowing list of elements.
+# For example, in LTR language like English, on the Tabs Toolbar it would look
+# like "<" and scroll the tab list to the left, and in the overflowing menu it
+# would look like "^" and scroll the list of menuitems up.
+overflow-scroll-button-up =
+    .tooltiptext = Scroll up
+# This button is shown at the end of the overflowing list of elements. For
+# example, in LTR language like English, on the Tabs Toolbar it would look like
+# ">" and scroll the tab list to the right, and in the overflowing menu it
+# would look like "v" and scroll the list of menuitems down.
+overflow-scroll-button-down =
+    .tooltiptext = Scroll down