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

Author: seojcarlos

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"

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