From 46dae9e7f08953a1f139df3dfd790ba2343db73b Mon Sep 17 00:00:00 2001
From: Vincent <git@vincenttunru.com>
Date: Wed, 13 Apr 2022 09:59:26 +0200
Subject: [PATCH] Add alt text for the "New tab" icon

Note that this alt text is likely to be the same everywhere, so I
just added it to the icon directly (but allowing for it to be
overwritten at the point of use, if necessary).
---
 frontend/pendingTranslations.ftl              |  2 ++
 frontend/src/components/Icons.tsx             | 14 ++++++++------
 frontend/src/components/layout/UserMenu.tsx   |  2 +-
 frontend/src/pages/accounts/settings.page.tsx |  6 +++---
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/pendingTranslations.ftl b/frontend/pendingTranslations.ftl
index 5768b460bd..88db14439e 100644
--- a/frontend/pendingTranslations.ftl
+++ b/frontend/pendingTranslations.ftl
@@ -2,6 +2,8 @@
 # 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/.
 
+common-link-newtab-alt = (Opens in a new tab)
+
 survey-option-dismiss = Dismiss
 
 survey-csat-question = How satisfied are you with your Firefox Relay experience?
diff --git a/frontend/src/components/Icons.tsx b/frontend/src/components/Icons.tsx
index 55e65af800..435e8605e6 100644
--- a/frontend/src/components/Icons.tsx
+++ b/frontend/src/components/Icons.tsx
@@ -2,6 +2,7 @@
 //       then added to react-icons: https://react-icons.github.io/react-icons/.
 //       These manually-created components are a workaround until that is done.
 
+import { useLocalization } from "@fluent/react";
 import { SVGProps } from "react";
 
 /** Info button that inherits the text color of its container */
@@ -55,14 +56,15 @@ export const CloseIcon = ({
 };
 
 /** Icon to indicate links that open in a new tab, that inherits the text color of its container */
-export const NewTabIcon = ({
-  alt,
-  ...props
-}: SVGProps<SVGSVGElement> & { alt: string }) => {
+export const NewTabIcon = (
+  props: SVGProps<SVGSVGElement> & { alt?: string }
+) => {
+  const { l10n } = useLocalization();
+
   return (
     <svg
       role="img"
-      aria-label={alt}
+      aria-label={props.alt ?? l10n.getString("common-link-newtab-alt")}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
       width={16}
@@ -73,7 +75,7 @@ export const NewTabIcon = ({
       }}
       {...props}
     >
-      <title>{alt}</title>
+      <title>{props.alt ?? l10n.getString("common-link-newtab-alt")}</title>
       <path d="M5 1H4a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3v-1a1 1 0 00-2 0v1a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1h1a1 1 0 100-2z" />
       <path d="M14.935 1.618A1 1 0 0014.012 1h-5a1 1 0 100 2h2.586L8.305 6.293A1 1 0 109.72 7.707l3.293-3.293V7a1 1 0 102 0V2a1 1 0 00-.077-.382z" />
     </svg>
diff --git a/frontend/src/components/layout/UserMenu.tsx b/frontend/src/components/layout/UserMenu.tsx
index caccf90980..2b9aa16eb3 100644
--- a/frontend/src/components/layout/UserMenu.tsx
+++ b/frontend/src/components/layout/UserMenu.tsx
@@ -137,7 +137,7 @@ export const UserMenu = () => {
             className={styles["settings-link"]}
           >
             {l10n.getString("nav-profile-manage-fxa")}
-            <NewTabIcon alt="" />
+            <NewTabIcon />
           </a>
         </span>
       </Item>
diff --git a/frontend/src/pages/accounts/settings.page.tsx b/frontend/src/pages/accounts/settings.page.tsx
index e88c6433fd..ef2705f26f 100644
--- a/frontend/src/pages/accounts/settings.page.tsx
+++ b/frontend/src/pages/accounts/settings.page.tsx
@@ -107,7 +107,7 @@ const Settings: NextPage = () => {
       >
         <img src={messageIcon.src} alt="" />
         {l10n.getString("settings-meta-contact-label")}
-        <NewTabIcon alt="" aria-hidden />
+        <NewTabIcon />
       </a>
     </li>
   ) : null;
@@ -167,7 +167,7 @@ const Settings: NextPage = () => {
                 >
                   <img src={helpIcon.src} alt="" />
                   {l10n.getString("settings-meta-help-label")}
-                  <NewTabIcon alt="" aria-hidden />
+                  <NewTabIcon />
                 </a>
               </li>
               <li>
@@ -179,7 +179,7 @@ const Settings: NextPage = () => {
                 >
                   <img src={performanceIcon.src} alt="" />
                   {l10n.getString("settings-meta-status-label")}
-                  <NewTabIcon alt="" aria-hidden />
+                  <NewTabIcon />
                 </a>
               </li>
             </ul>