Bug 1556039 - Fluent changes to 1556039 (removal of sr-only) spans (#5123)

* Bug-1556039 - Fluent changes to 1556039 (removal of sr-only) spans
* Simplifying FTL code from complex Copy() to plain Copy()

bin/bug_1485002_newtab.py

@@ -7,7 +7,7 @@ from __future__ import absolute_import
 import fluent.syntax.ast as FTL
 from fluent.migrate.helpers import transforms_from
 from fluent.migrate.helpers import TERM_REFERENCE, VARIABLE_REFERENCE
-from fluent.migrate import REPLACE
+from fluent.migrate import COPY, REPLACE
 
 TARGET_FILE = 'browser/browser/newtab/newtab.ftl'
 SOURCE_FILE = TARGET_FILE
@@ -98,11 +98,13 @@ newtab-confirm-delete-history-p1 = { COPY(from_path, "confirm_history_delete_p1"
 newtab-confirm-delete-history-p2 = { COPY(from_path, "confirm_history_delete_notice_p2") }
 
 newtab-topsites-add-search-engine = { COPY(from_path, "section_menu_action_add_search_engine") }
-newtab-topsites-tooltip =
+newtab-menu-section-tooltip =
     .title = { COPY(from_path, "context_menu_title") }
-newtab-topsites-placeholder-tooltip =
-    .title = { COPY(from_path, "edit_topsites_edit_button") }
+    .aria-label = { COPY(from_path, "context_menu_title") }
 
+newtab-menu-topsites-placeholder-tooltip =
+    .title = { COPY(from_path, "edit_topsites_edit_button") }
+    .aria-label = { COPY(from_path, "edit_topsites_edit_button") }
 newtab-menu-edit-topsites = { COPY(from_path, "edit_topsites_button_text") }
 newtab-menu-open-new-window = { COPY(from_path, "menu_action_open_new_window") }
 newtab-menu-open-new-private-window = { COPY(from_path, "menu_action_open_private_window") }
@@ -148,7 +150,8 @@ newtab-section-menu-privacy-notice = { COPY(from_path, "section_menu_action_priv
 newtab-empty-section-highlights = { COPY(from_path, "highlights_empty_state") }
 
         """, from_path='browser/chrome/browser/activity-stream/newtab.properties')
-    ),
+    )
+
     ctx.add_transforms(
         TARGET_FILE,
         SOURCE_FILE,
@@ -183,6 +186,28 @@ newtab-empty-section-highlights = { COPY(from_path, "highlights_empty_state") }
                     },
                 )
             ),
+            FTL.Message(
+                id=FTL.Identifier("newtab-menu-content-tooltip"),
+                attributes=[
+                    FTL.Attribute(
+                        id=FTL.Identifier("title"),
+                        value=COPY(
+                            "browser/chrome/browser/activity-stream/newtab.properties",
+                            "context_menu_title"
+                        )
+                    ),
+                    FTL.Attribute(
+                        id=FTL.Identifier("aria-label"),
+                        value=REPLACE(
+                            "browser/chrome/browser/activity-stream/newtab.properties",
+                            "context_menu_button_sr",
+                            {
+                                "{title}": VARIABLE_REFERENCE("title")
+                            },
+                        )
+                    ),
+                ]
+            ),
             FTL.Message(
                 id=FTL.Identifier("newtab-label-saved"),
                 value=REPLACE(

content-src/components/Card/Card.jsx

@@ -246,9 +246,9 @@ export class _Card extends React.PureComponent {
         </div>
       </a>
       {!props.placeholder && <button aria-haspopup="true"
-        aria-label={this.props.intl.formatMessage({id: "context_menu_button_sr"}, {title})}
+        data-l10n-id="newtab-menu-content-tooltip"
+        data-l10n-args={`{ "title": "${title}" }`}
         className="context-menu-button icon"
-        title={this.props.intl.formatMessage({id: "context_menu_title"})}
         onClick={this.onMenuButtonClick} />}
       {isContextMenuOpen &&
         <LinkMenu

content-src/components/CollapsibleSection/CollapsibleSection.jsx

@@ -184,8 +184,7 @@ export class _CollapsibleSection extends React.PureComponent {
             <button
               aria-haspopup="true"
               className="context-menu-button icon"
-              title={this.props.intl.formatMessage({id: "context_menu_title"})}
-              aria-label={this.props.intl.formatMessage({id: "context_menu_button_sr"}, {title})}
+              data-l10n-id="newtab-menu-section-tooltip"
               onClick={this.onMenuButtonClick}
               ref={this.setContextMenuButtonRef} />
             {showContextMenu &&

content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx

@@ -51,8 +51,8 @@ export class _DSLinkMenu extends React.PureComponent {
       <button ref={this.contextMenuButtonRef}
               aria-haspopup="true"
               className="context-menu-button icon"
-              title={this.props.intl.formatMessage({id: "context_menu_title"})}
-              aria-label={this.props.intl.formatMessage({id: "context_menu_button_sr"}, {title})}
+              data-l10n-id="newtab-menu-content-tooltip"
+              data-l10n-args={`{ "title": "${title}" }`}
               onClick={this.onMenuButtonClick} />
       {isContextMenuOpen &&
         <LinkMenu

content-src/components/TopSites/TopSite.jsx

@@ -282,9 +282,9 @@ export class TopSite extends React.PureComponent {
     return (<TopSiteLink {...props} onClick={this.onLinkClick} onDragEvent={this.props.onDragEvent} className={`${props.className || ""}${isContextMenuOpen ? " active" : ""}`} title={title}>
         <div>
           <button aria-haspopup="true"
-            aria-label={this.props.intl.formatMessage({id: "context_menu_button_sr"}, {title})}
             className="context-menu-button icon"
-            title={this.props.intl.formatMessage({id: "context_menu_title"})}
+            data-l10n-id="newtab-menu-content-tooltip"
+            data-l10n-args={`{ "title": "${title}" }`}
             onClick={this.onMenuButtonClick} />
           {isContextMenuOpen &&
             <LinkMenu
@@ -319,8 +319,7 @@ export class TopSitePlaceholder extends React.PureComponent {
   render() {
     return (<TopSiteLink {...this.props} className={`placeholder ${this.props.className || ""}`} isDraggable={false}>
       <button aria-haspopup="true" className="context-menu-button edit-button icon"
-       title={this.props.intl.formatMessage({id: "edit_topsites_edit_button"})}
-       aria-label={this.props.intl.formatMessage({id: "edit_topsites_edit_button"})}
+       data-l10n-id="newtab-menu-topsites-placeholder-tooltip"
        onClick={this.onEditButtonClick} />
     </TopSiteLink>);
   }

locales-src/en-US/strings.properties

@@ -4,15 +4,6 @@ header_highlights=Highlights
 # of the corresponding content provider.
 header_recommended_by=Recommended by {provider}
 
-# LOCALIZATION NOTE(context_menu_button_sr): This is for screen readers when
-# the context menu button is focused/active. Title is the label or hostname of
-# the site.
-context_menu_button_sr=Open context menu for {title}
-
-# LOCALIZATION NOTE(section_context_menu_button_sr): This is for screen readers when
-# the section edit context menu button is focused/active.
-section_context_menu_button_sr=Open the section context menu
-
 # LOCALIZATION NOTE (section_disclaimer_topstories): This is shown below
 # the topstories section title to provide additional information about
 # how the stories are selected.
@@ -55,11 +46,6 @@ settings_pane_highlights_options_bookmarks=Bookmarks
 # something else, and non-essential but also not entirely trivial and useless."
 settings_pane_snippets_header=Snippets
 
-# LOCALIZATION NOTE (edit_topsites_*): This is shown in the Edit Top Sites modal
-# dialog.
-edit_topsites_button_text=Edit
-edit_topsites_edit_button=Edit this site
-
 # LOCALIZATION NOTE (pocket_read_more): This is shown at the bottom of the
 # trending stories section and precedes a list of links to popular topics.
 pocket_read_more=Popular Topics:
@@ -99,6 +85,3 @@ firstrun_privacy_notice=Privacy Notice
 
 firstrun_continue_to_login=Continue
 firstrun_skip_login=Skip this step
-
-# LOCALIZATION NOTE (context_menu_title): Action tooltip to open a context menu
-context_menu_title=Open menu

locales-src/newtab.ftl

@@ -53,13 +53,22 @@ newtab-confirm-delete-history-p2 = This action cannot be undone.
 
 newtab-topsites-add-search-engine = Add Search Engine
 
-## Top Site - Action Tooltips.
-# Tooltip to open the context menu for a given top site.
-newtab-topsites-tooltip =
+## Context Menu - Action Tooltips.
+# General tool tip for context menus.
+newtab-menu-section-tooltip =
     .title = Open menu
+    .aria-label = Open menu
+
+# This tooltip is for the context menu of Pocket cards or Topsites
+# Variables:
+#  $title (String): Title is the label or hostname of the site. This is for screen readers when the context menu button is focused/active.
+newtab-menu-content-tooltip =
+    .title = Open menu
+    .aria-label = Open context menu for { $title }
 # Tooltip on an empty topsite box to open the New Top Site dialog.
-newtab-topsites-placeholder-tooltip =
+newtab-menu-topsites-placeholder-tooltip =
     .title = Edit this site
+    .aria-label = Edit this site
 
 ## Context Menu: These strings are displayed in a context menu and are meant as a call to action for a given page.
 newtab-menu-edit-topsites = Edit