From fef8a69505d2c8de120de54abe3cad0ac85d743a Mon Sep 17 00:00:00 2001
From: seojcarlos <jcarlos@convertiam.com>
Date: Fri, 3 Apr 2026 20:37:08 +0200
Subject: [PATCH] fix(a11y): add aria-label to icon-only links in Sandpack
 toolbar

The OpenInTypeScriptPlayground and OpenInCodeSandbox buttons hide their
text labels on mobile (hidden md:block), leaving only an icon visible.
Screen readers could not determine the link purpose since title alone
is insufficient per WCAG 2.4.4 (Link Purpose).

Add aria-label to both components so screen readers always announce the
link purpose regardless of viewport size.

Fixes #8366
---
 src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx    | 3 ++-
 src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index 83b968fabf7..428027232c3 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -16,7 +16,8 @@ export const OpenInCodeSandboxButton = () => {
   return (
     <UnstyledOpenInCodeSandboxButton
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
-      title="Open in CodeSandbox">
+      title="Open in CodeSandbox"
+      aria-label="Open in CodeSandbox">
       <IconNewPage
         className="inline mx-1 relative top-[1px]"
         width="1em"
diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
index ca0286530e4..15b79dd2741 100644
--- a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
+++ b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
@@ -20,6 +20,7 @@ export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
         contentWithReactImport
       )}`}
       title="Open in TypeScript Playground"
+      aria-label="Open in TypeScript Playground"
       target="_blank"
       rel="noreferrer">
       <IconNewPage