fix(ui): make LinkWithArrow behave like accessible button for modal open

Author: Mohit5Upadhyay

apps/site/components/Common/LinkWithArrow/index.module.css

@@ -0,0 +1,16 @@
+@reference "../../../styles/index.css";
+
+.icon {
+  @apply ml-1
+    inline
+    w-3
+    fill-neutral-600
+    dark:fill-white;
+}
+
+.button {
+  @apply text-green-600
+    hover:text-green-900
+    dark:text-green-400
+    dark:hover:text-green-200;
+}

apps/site/components/Common/LinkWithArrow/index.tsx

@@ -0,0 +1,48 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import type {
+  ButtonHTMLAttributes,
+  ComponentProps,
+  FC,
+  PropsWithChildren,
+} from 'react';
+
+import Link from '#site/components/Link';
+
+import styles from './index.module.css';
+
+type LinkWithArrowProps =
+  | ComponentProps<typeof Link>
+  | ButtonHTMLAttributes<HTMLButtonElement>;
+
+const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = ({
+  children,
+  className,
+  ...props
+}) => {
+  const content = (
+    <span>
+      {children}
+      <ArrowUpRightIcon className={styles.icon} />
+    </span>
+  );
+
+  if ('href' in props) {
+    return (
+      <Link {...props} className={className}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      className={classNames(className, styles.button)}
+      {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default LinkWithArrow;

apps/site/components/Downloads/DownloadLink.tsx

@@ -2,7 +2,7 @@
 
 import type { FC, PropsWithChildren } from 'react';
 
-import LinkWithArrow from '#site/components/LinkWithArrow';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import { useClientContext } from '#site/hooks';
 import type { DownloadKind, NodeRelease } from '#site/types';
 import { getNodeDownloadUrl } from '#site/util/url';

apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { use } from 'react';
 
-import LinkWithArrow from '#site/components/LinkWithArrow';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import { ReleaseModalContext } from '#site/providers/releaseModalProvider';
 import type { NodeRelease } from '#site/types';
 
@@ -19,8 +19,8 @@ const DetailsButton: FC<DetailsButtonProps> = ({ versionData }) => {
 
   return (
     <LinkWithArrow
-      className="cursor-pointer"
       onClick={() => openModal(versionData)}
+      aria-label={t('details')}
     >
       {t('details')}
     </LinkWithArrow>

apps/site/components/Downloads/Release/ChangelogLink.tsx

@@ -3,17 +3,16 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useContext } from 'react';
 
-import Link from '#site/components/Link';
-import LinkWithArrow from '#site/components/LinkWithArrow';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
 import { ReleaseContext } from '#site/providers/releaseProvider';
 
 const ChangelogLink: FC<PropsWithChildren> = ({ children }) => {
   const { release } = useContext(ReleaseContext);
 
   return (
-    <LinkWithArrow asChild>
-      <Link href={`${BASE_CHANGELOG_URL}${release.version}`}>{children}</Link>
+    <LinkWithArrow href={`${BASE_CHANGELOG_URL}${release.version}`}>
+      {children}
     </LinkWithArrow>
   );
 };

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -8,8 +8,8 @@ import type { FC } from 'react';
 import { useContext, useMemo } from 'react';
 
 import CodeBox from '#site/components/Common/CodeBox';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import Link from '#site/components/Link';
-import LinkWithArrow from '#site/components/LinkWithArrow';
 import { createSval } from '#site/next.jsx.compiler.mjs';
 import {
   ReleaseContext,

apps/site/components/LinkWithArrow.tsx

@@ -84,7 +84,6 @@ const nextConfig = {
       '@radix-ui/react-dropdown-menu',
       '@radix-ui/react-label',
       '@radix-ui/react-select',
-      '@radix-ui/react-slot',
       '@radix-ui/react-tabs',
       '@radix-ui/react-toast',
       '@radix-ui/react-tooltip',

apps/site/next.config.mjs

@@ -4,6 +4,7 @@ import Blockquote from '@node-core/ui-components/Common/Blockquote';
 import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs';
 
 import Button from './components/Common/Button';
+import LinkWithArrow from './components/Common/LinkWithArrow';
 import DownloadButton from './components/Downloads/DownloadButton';
 import DownloadLink from './components/Downloads/DownloadLink';
 import BlogPostLink from './components/Downloads/Release/BlogPostLink';
@@ -17,7 +18,6 @@ import ReleasePrebuiltDownloadButtons from './components/Downloads/Release/Prebu
 import ReleaseCodeBox from './components/Downloads/Release/ReleaseCodeBox';
 import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdown';
 import Link from './components/Link';
-import LinkWithArrow from './components/LinkWithArrow';
 import MDXCodeBox from './components/MDX/CodeBox';
 import MDXImage from './components/MDX/Image';
 import { ReleaseProvider } from './providers/releaseProvider';

apps/site/next.mdx.use.client.mjs

@@ -42,7 +42,6 @@
     "@opentelemetry/sdk-logs": "~0.202.0",
     "@orama/react-components": "^0.8.1",
     "@oramacloud/client": "^2.1.4",
-    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "~4.1.11",