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

* fix(ui): make `LinkWithArrow` accessible

Co-Authored-By: Mohit5Upadhyay <[email protected]>

* fixup!

---------

Co-authored-by: avivkeller <[email protected]>

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,38 @@
+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
+}) =>
+  'href' in props ? (
+    <Link {...props} className={className}>
+      {children}
+      <ArrowUpRightIcon className={styles.icon} />
+    </Link>
+  ) : (
+    <button
+      className={classNames(className, styles.button)}
+      {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {children}
+      <ArrowUpRightIcon className={styles.icon} />
+    </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/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/EOL/EOLReleaseTable.tsx

@@ -5,9 +5,9 @@ import { Fragment, useState } from 'react';
 import type { FC } from 'react';
 
 import FormattedTime from '#site/components/Common/FormattedTime';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import EOLModal from '#site/components/EOL/EOLModal';
 import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
-import LinkWithArrow from '#site/components/LinkWithArrow';
 import provideReleaseData from '#site/next-data/providers/releaseData';
 import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
 import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';

apps/site/components/EOL/VulnerabilitiesTable.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import VulnerabilityChip from '#site/components/EOL/VulnerabilityChips/VulnerabilityChip';
-import LinkWithArrow from '#site/components/LinkWithArrow';
 import type { Vulnerability } from '#site/types/vulnerabilities';
 
 const VulnerabilitiesTable: FC<{

apps/site/components/LinkWithArrow.tsx

@@ -6,7 +6,7 @@ import type { FC } from 'react';
 import { useState } from 'react';
 
 import FormattedTime from '#site/components/Common/FormattedTime';
-import LinkWithArrow from '#site/components/LinkWithArrow';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import provideReleaseData from '#site/next-data/providers/releaseData';
 
 import ReleaseModal from './ReleaseModal';

apps/site/components/Releases/PreviousReleasesTable.tsx

@@ -86,7 +86,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',