fix(theme): Add aria-label to IconExternalLink with value '(opens in new tab)'

[WestonThayer]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• [ ] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

• Closes Links that open in new tabs/windows should be tagged for assistive technology #10654

Test Plan

Before/after behavior with NVDA:

assistivlabs_win-nvda_2025.1.1_win-chrome_137_2025-07-16T17-55-57.258Z.mp4

Test links

Deploy preview: https://deploy-preview-11331--docusaurus-2.netlify.app/

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	985bd2e
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/68879d62986180000884b9a2
😎 Deploy Preview	https://deploy-preview-11331--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	Report
/	🟠 64	🟢 98	🟢 100	🟢 100	Report
/docs/installation	🟠 60	🟢 97	🟢 100	🟢 100	Report
/docs/category/getting-started	🟠 68	🟢 100	🟢 100	🟠 86	Report
/blog	🟠 59	🟢 96	🟢 100	🟠 86	Report
/blog/preparing-your-site-for-docusaurus-v3	🟠 58	🟢 92	🟢 100	🟢 100	Report
/blog/tags/release	🟠 57	🟢 96	🟢 100	🟠 86	Report
/blog/tags	🟠 67	🟢 100	🟢 100	🟠 86	Report

[WestonThayer]

Here's a (untested) patch with an alternate approach if desired. It doesn't seem bad to me that NVDA announces that there's visually a "graphic" there, but a <span className="screen-reader-only"> approach below would avoid that (and is more friendly to auto translate https://adrianroselli.com/2019/11/aria-label-does-not-translate.html).

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/index.tsx
index a39b85a..9ce4c77 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/index.tsx
@@ -52,7 +52,12 @@ export default function DocSidebarItemLink({
         })}
         {...props}>
         {label}
-        {!isInternalLink && <IconExternalLink />}
+        {!isInternalLink && (
+          <>
+            <span className="screen-reader-only"> (opens in new tab)</span>
+            <IconExternalLink />
+          </>
+        )}
       </Link>
     </li>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx
index ac4f6b4..92b5fbc 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx
@@ -30,7 +30,12 @@ export default function FooterLinkItem({item}: Props): ReactNode {
           })}
       {...props}>
       {label}
-      {href && !isInternalUrl(href) && <IconExternalLink />}
+      {href && !isInternalUrl(href) && (
+        <>
+          <span className="screen-reader-only"> (opens in new tab)</span>
+          <IconExternalLink />
+        </>
+      )}
     </Link>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
index 7b104df..87523b6 100644
--- a/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
@@ -22,7 +22,7 @@ export default function IconExternalLink({
     <svg
       width={width}
       height={height}
-      aria-label="(opens in new tab)"
+      aria-hidden="true"
       className={styles.iconExternalLink}>
       <use href={svgSprite} />
     </svg>
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
index 52e198d..016893b 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
@@ -39,9 +39,12 @@ export default function NavbarNavLink({
           <>
             {label}
             {isExternalLink && (
-              <IconExternalLink
-                {...(isDropdownLink && {width: 12, height: 12})}
-              />
+              <>
+                <span className="screen-reader-only"> (opens in new tab)</span>
+                <IconExternalLink
+                  {...(isDropdownLink && {width: 12, height: 12})}
+                />
+              </>
             )}
           </>
         ),

[slorber]

Thanks, I think the current approach looks fine, and we shouldn't need auto-translate since we'll provided translated labels built-in (once our community translate them)