Add external icon with assistive text to all uses of external link co…

…mponent. In some cases there was a custom implementation of an external link icon.
SFDO-Tooling · May 15, 2023 · 8a9357f · 8a9357f
1 parent 8d17942
commit 8a9357f
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 60 deletions.
diff --git a/locales_dev/en/translation.json b/locales_dev/en/translation.json
@@ -239,6 +239,7 @@
   "Notify Assigned Tester by Email": "Notify Assigned Tester by Email",
   "Notify {{username}} by email": "Notify {{username}} by email",
   "Only displaying the first {{limit}} objects. Enter a term above to search the full list.": "Only displaying the first {{limit}} objects. Enter a term above to search the full list.",
+  "Opens in new tab": "Opens in new tab",
   "Optional Configuration Directories": "Optional Configuration Directories",
   "Optional description of this Project": "Optional description of this Project",
   "Optional notes about this Scratch Org": "Optional notes about this Scratch Org",

diff --git a/src/js/components/commits/list.tsx b/src/js/components/commits/list.tsx
@@ -30,7 +30,9 @@ const CommitTableCell = ({ item, className, ...props }: TableCellProps) => {
       title={item.id}
       className={classNames(className, 'commits-sha')}
     >
-      <ExternalLink url={item.url}>{shortSha}</ExternalLink>
+      <ExternalLink url={item.url} showButtonIcon>
+        {shortSha}
+      </ExternalLink>
     </DataTableCell>
   );
 };

diff --git a/src/js/components/epics/table/detailCell.tsx b/src/js/components/epics/table/detailCell.tsx
@@ -59,15 +59,8 @@ const DetailTableCell = ({
               slds-truncate"
           >
             {t('Branch:')}{' '}
-            <ExternalLink url={branch_url}>
+            <ExternalLink url={branch_url} showButtonIcon>
               {branch_name}
-              <Icon
-                category="utility"
-                name="new_window"
-                size="xx-small"
-                className="slds-m-bottom_xx-small"
-                containerClassName="slds-m-left_xx-small"
-              />
             </ExternalLink>
           </p>
         )}

diff --git a/src/js/components/githubIssues/selectIssueModal.tsx b/src/js/components/githubIssues/selectIssueModal.tsx
@@ -50,17 +50,8 @@ export const GitHubIssueLink = ({ url }: { url: string }) => {
   const { t } = useTranslation();
 
   return (
-    <ExternalLink url={url}>
+    <ExternalLink url={url} showButtonIcon>
       {t('View on GitHub')}
-      <Icon
-        category="utility"
-        name="new_window"
-        size="xx-small"
-        className="slds-button__icon
-          slds-button__icon_right
-          slds-m-bottom_xx-small"
-        containerClassName="slds-icon_container slds-current-color"
-      />
     </ExternalLink>
   );
 };

diff --git a/src/js/components/header.tsx b/src/js/components/header.tsx
@@ -33,7 +33,10 @@ const Header = () => {
             <Trans i18nKey="tourUser">
               Here you can check which GitHub account is logged in, connect and
               disconnect from Salesforce, or log out as needed.{' '}
-              <ExternalLink url="https://help.salesforce.com/articleView?id=sfdx_setup_enable_devhub.htm&type=0">
+              <ExternalLink
+                url="https://help.salesforce.com/articleView?id=sfdx_setup_enable_devhub.htm&type=0"
+                showButtonIcon
+              >
                 Enable Dev Hub
               </ExternalLink>{' '}
               on your Salesforce account to contribute to Projects in Metecho.

diff --git a/src/js/components/orgs/cards/footer.tsx b/src/js/components/orgs/cards/footer.tsx
@@ -88,7 +88,11 @@ const Footer = ({
         );
       }
       const label = readyForReview ? t('Test Changes in Org') : t('View Org');
-      return <ExternalLink url={orgUrl}>{label}</ExternalLink>;
+      return (
+        <ExternalLink url={orgUrl} showButtonIcon>
+          {label}
+        </ExternalLink>
+      );
     }
   }
 

diff --git a/src/js/components/orgs/cards/orgIcon.tsx b/src/js/components/orgs/cards/orgIcon.tsx
@@ -41,7 +41,7 @@ const OrgIcon = ({
         onClick={openRefreshOrgModal}
       />
     ) : (
-      <ExternalLink url={orgUrl} title={t('View Org')}>
+      <ExternalLink url={orgUrl} title={t('View Org')} showButtonIcon>
         {iconLink}
       </ExternalLink>
     );

diff --git a/src/js/components/orgs/cards/orgInfo.tsx b/src/js/components/orgs/cards/orgInfo.tsx
@@ -107,7 +107,7 @@ const OrgInfo = ({
             <>
               {' '}
               (
-              <ExternalLink url={compareChangesUrl}>
+              <ExternalLink url={compareChangesUrl} showButtonIcon>
                 {t('view changes')}
               </ExternalLink>
               )
@@ -123,7 +123,7 @@ const OrgInfo = ({
           <li>
             <strong>{t('Deployed Commit:')}</strong>{' '}
             {org.latest_commit_url ? (
-              <ExternalLink url={org.latest_commit_url}>
+              <ExternalLink url={org.latest_commit_url} showButtonIcon>
                 {org.latest_commit.substring(0, 7)}
               </ExternalLink>
             ) : (

diff --git a/src/js/components/orgs/cards/refresh.tsx b/src/js/components/orgs/cards/refresh.tsx
@@ -57,6 +57,7 @@ const RefreshOrgModal = ({
           be testing the latest changes.
         </Trans>
         <ExternalLink
+          showButtonIcon
           url={orgUrl}
           className="slds-button
             slds-size_full

diff --git a/src/js/components/steps/stepsItem.tsx b/src/js/components/steps/stepsItem.tsx
@@ -35,15 +35,8 @@ const StepsItem = ({
   if (isActive) {
     if (step.link) {
       label = (
-        <ExternalLink url={step.link}>
+        <ExternalLink url={step.link} showButtonIcon>
           {step.label}
-          <Icon
-            category="utility"
-            name="new_window"
-            size="xx-small"
-            className="slds-m-bottom_xx-small"
-            containerClassName="slds-m-left_xx-small"
-          />
         </ExternalLink>
       );
     }

diff --git a/src/js/components/user/connect.tsx b/src/js/components/user/connect.tsx
@@ -72,11 +72,17 @@ const ConnectModal = ({
         <Trans i18nKey="devHubInfo">
           Connection to a Salesforce Org with Dev Hub enabled is required to
           create a Dev, Test, or Scratch Org. Learn how to{' '}
-          <ExternalLink url="https://developer.salesforce.com/signup">
+          <ExternalLink
+            url="https://developer.salesforce.com/signup"
+            showButtonIcon
+          >
             create a Developer Edition Org
           </ExternalLink>{' '}
           and{' '}
-          <ExternalLink url="https://help.salesforce.com/articleView?id=sfdx_setup_enable_devhub.htm&type=0">
+          <ExternalLink
+            url="https://help.salesforce.com/articleView?id=sfdx_setup_enable_devhub.htm&type=0"
+            showButtonIcon
+          >
             enable Dev Hub
           </ExternalLink>
           .

diff --git a/src/js/components/user/info.tsx b/src/js/components/user/info.tsx
@@ -59,7 +59,10 @@ const ConnectionInfoWarning = () => (
   <Trans i18nKey="devHubNotEnabled">
     This Salesforce Org does not have Dev Hub enabled or your user does not have
     permission to create Dev, Test, or Scratch Orgs. Learn how to{' '}
-    <ExternalLink url="https://help.salesforce.com/articleView?id=sfdx_setup_enable_devhub.htm&type=0">
+    <ExternalLink
+      url="https://help.salesforce.com/articleView?id=sfdx_setup_enable_devhub.htm&type=0"
+      showButtonIcon
+    >
       enable Dev Hub
     </ExternalLink>
     .

diff --git a/src/js/components/utils/detailPageLayout.tsx b/src/js/components/utils/detailPageLayout.tsx
@@ -96,7 +96,7 @@ const DetailPageLayout = ({
           }
           info={
             headerUrl && headerUrlText ? (
-              <ExternalLink url={headerUrl} showGitHubIcon>
+              <ExternalLink url={headerUrl} showGitHubIcon showButtonIcon>
                 /{headerUrlText}
               </ExternalLink>
             ) : null

diff --git a/src/js/components/utils/externalLink.tsx b/src/js/components/utils/externalLink.tsx
@@ -1,5 +1,6 @@
 import Icon from '@salesforce/design-system-react/components/icon';
 import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import githubIcon from '@/img/github.svg';
 
@@ -15,26 +16,30 @@ const ExternalLink = ({
   showGitHubIcon?: boolean;
   children?: ReactNode;
   [key: string]: any;
-}) => (
-  <a href={url} target="_blank" rel="noreferrer noopener" {...props}>
-    {showGitHubIcon && (
-      <Icon
-        path={`${githubIcon}#github`}
-        size="xx-small"
-        className="icon-link slds-m-bottom_xx-small"
-      />
-    )}
-    {showButtonIcon && (
-      <Icon
-        category="utility"
-        name="new_window"
-        size="xx-small"
-        className="slds-button__icon slds-button__icon_left"
-        containerClassName="slds-icon_container slds-current-color"
-      />
-    )}
-    {children}
-  </a>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <a href={url} target="_blank" rel="noreferrer noopener" {...props}>
+      {showGitHubIcon && (
+        <Icon
+          path={`${githubIcon}#github`}
+          size="xx-small"
+          className="icon-link slds-m-bottom_xx-small"
+        />
+      )}
+      {children}
+      {showButtonIcon && (
+        <Icon
+          category="utility"
+          name="new_window"
+          size="xx-small"
+          className="slds-button__icon slds-button__icon_right"
+          containerClassName="slds-icon_container slds-current-color"
+          assistiveText={{ label: t('Opens in new tab') }}
+        />
+      )}
+    </a>
+  );
+};
 
 export default ExternalLink;
diff --git a/src/js/components/utils/submitModal.tsx b/src/js/components/utils/submitModal.tsx
@@ -318,7 +318,10 @@ const SubmitModal = ({
               <p>
                 <Trans i18nKey="markdownGuide">
                   For more options, view this{' '}
-                  <ExternalLink url="https://guides.github.com/features/mastering-markdown/">
+                  <ExternalLink
+                    url="https://guides.github.com/features/mastering-markdown/"
+                    showButtonIcon
+                  >
                     Markdown Guide
                   </ExternalLink>
                   .

diff --git a/test/js/components/epics/__snapshots__/steps.test.jsx.snap b/test/js/components/epics/__snapshots__/steps.test.jsx.snap
@@ -373,14 +373,19 @@ exports[`<EpicStatusSteps /> renders steps: epic with pr 1`] = `
           >
             Merge pull request on GitHub
             <span
-              class="slds-m-left_xx-small"
+              class="slds-icon_container slds-current-color"
             >
               <svg
                 aria-hidden="true"
-                class="slds-m-bottom_xx-small slds-icon slds-icon_xx-small slds-icon-text-default"
+                class="slds-button__icon slds-button__icon_right slds-icon slds-icon_xx-small slds-icon-text-default"
               >
                 <use />
               </svg>
+              <span
+                class="slds-assistive-text"
+              >
+                Opens in new tab
+              </span>
             </span>
           </a>
         </div>