From 19332d124d565a78c9302991b050ee448fb4f7a9 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 25 Apr 2024 10:57:56 +0700
Subject: [PATCH] Update nesting of Button and Link components

The Link component is modified to be nested within the Button component in various JSX files. This change was made with the aid of the 'asChild' property, it ensures that the link remains operable even when wrapped by the button, improving the site's semantics and accessibility.
---
 .../site-header-account-section.tsx           | 16 +++++++-------
 .../_components/site-navigation.tsx           |  2 +-
 apps/web/app/(marketing)/faq/page.tsx         |  8 +++----
 apps/web/app/(marketing)/page.tsx             | 16 +++++++-------
 apps/web/app/auth/callback/error/page.tsx     |  2 +-
 apps/web/app/auth/password-reset/page.tsx     |  8 +++----
 apps/web/app/auth/sign-in/page.tsx            |  8 +++----
 apps/web/app/auth/sign-up/page.tsx            |  8 +++----
 apps/web/app/join/page.tsx                    |  8 +++----
 apps/web/app/not-found.tsx                    |  8 +++----
 .../src/components/password-sign-in-form.tsx  | 19 +++++++++--------
 packages/ui/src/makerkit/sidebar.tsx          | 21 ++++++++++---------
 12 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 7c10175cc..0f1f4c030 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -71,15 +71,15 @@ function AuthButtons() {
       <div className={'hidden space-x-0.5 md:flex'}>
         <ModeToggle className={textClassName} />
 
-        <Link href={pathsConfig.auth.signIn}>
-          <Button variant={'ghost'} className={textClassName}>
+        <Button asChild variant={'ghost'} className={textClassName}>
+          <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:signIn'} />
-          </Button>
-        </Link>
+          </Link>
+        </Button>
       </div>
 
-      <Link href={pathsConfig.auth.signUp}>
-        <Button className="group" variant={'default'}>
+      <Button asChild className="group" variant={'default'}>
+        <Link href={pathsConfig.auth.signUp}>
           <Trans i18nKey={'auth:signUp'} />
 
           <ChevronRight
@@ -87,8 +87,8 @@ function AuthButtons() {
               'ml-1 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1'
             }
           />
-        </Button>
-      </Link>
+        </Link>
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index d51593951..c69c88369 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -70,7 +70,7 @@ function MobileDropdown() {
           const className = 'flex w-full h-full items-center';
 
           return (
-            <DropdownMenuItem key={item.path}>
+            <DropdownMenuItem key={item.path} asChild>
               <Link className={className} href={item.path}>
                 <Trans i18nKey={item.label} />
               </Link>
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index a7aeeb686..da6f02534 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -86,15 +86,15 @@ async function FAQPage() {
           </div>
 
           <div>
-            <Link href={'/contact'}>
-              <Button variant={'outline'}>
+            <Button variant={'outline'}>
+              <Link asChild href={'/contact'}>
                 <span>
                   <Trans i18nKey={'marketing:contactFaq'} />
                 </span>
 
                 <ArrowRight className={'ml-2 w-4'} />
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 4999207df..5cd079a7f 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -347,14 +347,14 @@ function FeatureContainer(
 function MainCallToActionButton() {
   return (
     <div className={'flex space-x-2'}>
-      <Link href={'/docs'}>
-        <Button variant={'link'}>
+      <Button asChild variant={'link'}>
+        <Link href={'/docs'}>
           <Trans i18nKey={'common:documentation'} />
-        </Button>
-      </Link>
+        </Link>
+      </Button>
 
-      <Link href={'/auth/sign-up'}>
-        <Button>
+      <Button asChild>
+        <Link href={'/auth/sign-up'}>
           <span className={'flex items-center space-x-0.5'}>
             <span>
               <Trans i18nKey={'common:getStarted'} />
@@ -367,8 +367,8 @@ function MainCallToActionButton() {
               }
             />
           </span>
-        </Button>
-      </Link>
+        </Link>
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/app/auth/callback/error/page.tsx b/apps/web/app/auth/callback/error/page.tsx
index 672e7e4fb..1c147f838 100644
--- a/apps/web/app/auth/callback/error/page.tsx
+++ b/apps/web/app/auth/callback/error/page.tsx
@@ -39,7 +39,7 @@ function AuthCallbackErrorPage({ searchParams }: Params) {
         </Alert>
       </div>
 
-      <Button>
+      <Button asChild>
         <Link href={signInPath}>
           <Trans i18nKey={'auth:signIn'} />
         </Link>
diff --git a/apps/web/app/auth/password-reset/page.tsx b/apps/web/app/auth/password-reset/page.tsx
index a52910a55..e6801dc15 100644
--- a/apps/web/app/auth/password-reset/page.tsx
+++ b/apps/web/app/auth/password-reset/page.tsx
@@ -31,11 +31,11 @@ function PasswordResetPage() {
         <PasswordResetRequestContainer redirectPath={redirectPath} />
 
         <div className={'flex justify-center text-xs'}>
-          <Link href={signIn}>
-            <Button variant={'link'} size={'sm'}>
+          <Button asChild variant={'link'} size={'sm'}>
+            <Link href={signIn}>
               <Trans i18nKey={'auth:passwordRecoveredQuestion'} />
-            </Button>
-          </Link>
+            </Link>
+          </Button>
         </div>
       </div>
     </>
diff --git a/apps/web/app/auth/sign-in/page.tsx b/apps/web/app/auth/sign-in/page.tsx
index 587eb8178..28aa7234f 100644
--- a/apps/web/app/auth/sign-in/page.tsx
+++ b/apps/web/app/auth/sign-in/page.tsx
@@ -33,11 +33,11 @@ function SignInPage() {
       <SignInMethodsContainer paths={paths} providers={authConfig.providers} />
 
       <div className={'flex justify-center'}>
-        <Link href={pathsConfig.auth.signUp}>
-          <Button variant={'link'} size={'sm'}>
+        <Button asChild variant={'link'} size={'sm'}>
+          <Link href={pathsConfig.auth.signUp}>
             <Trans i18nKey={'auth:doNotHaveAccountYet'} />
-          </Button>
-        </Link>
+          </Link>
+        </Button>
       </div>
     </>
   );
diff --git a/apps/web/app/auth/sign-up/page.tsx b/apps/web/app/auth/sign-up/page.tsx
index 7ce1f8b94..a8e4317fb 100644
--- a/apps/web/app/auth/sign-up/page.tsx
+++ b/apps/web/app/auth/sign-up/page.tsx
@@ -45,11 +45,11 @@ function SignUpPage({ searchParams }: Props) {
       />
 
       <div className={'justify-centers flex'}>
-        <Link href={pathsConfig.auth.signIn}>
-          <Button variant={'link'} size={'sm'}>
+        <Button asChild variant={'link'} size={'sm'}>
+          <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:alreadyHaveAnAccount'} />
-          </Button>
-        </Link>
+          </Link>
+        </Button>
       </div>
     </>
   );
diff --git a/apps/web/app/join/page.tsx b/apps/web/app/join/page.tsx
index 0dedd984d..6acf94a7f 100644
--- a/apps/web/app/join/page.tsx
+++ b/apps/web/app/join/page.tsx
@@ -119,12 +119,12 @@ function InviteNotFoundOrExpired() {
         <Trans i18nKey={'teams:inviteNotFoundOrExpiredDescription'} />
       </p>
 
-      <Link href={pathsConfig.app.home}>
-        <Button className={'w-full'} variant={'outline'}>
+      <Button asChild className={'w-full'} variant={'outline'}>
+        <Link href={pathsConfig.app.home}>
           <ArrowLeft className={'mr-2 w-4'} />
           <Trans i18nKey={'teams:backToHome'} />
-        </Button>
-      </Link>
+        </Link>
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 976b387e6..4414cb26b 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -56,13 +56,13 @@ const NotFoundPage = async () => {
               </p>
             </div>
 
-            <Link href={'/'}>
-              <Button variant={'outline'}>
+            <Button asChild variant={'outline'}>
+              <Link href={'/'}>
                 <ArrowLeft className={'mr-2 h-4'} />
 
                 <Trans i18nKey={'common:backToHomePage'} />
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/packages/features/auth/src/components/password-sign-in-form.tsx b/packages/features/auth/src/components/password-sign-in-form.tsx
index afbcfe58d..c8181f40e 100644
--- a/packages/features/auth/src/components/password-sign-in-form.tsx
+++ b/packages/features/auth/src/components/password-sign-in-form.tsx
@@ -88,16 +88,17 @@ export const PasswordSignInForm: React.FC<{
 
               <FormMessage />
 
-              <Link href={'/auth/password-reset'}>
-                <Button
-                  type={'button'}
-                  size={'sm'}
-                  variant={'link'}
-                  className={'text-xs'}
-                >
+              <Button
+                asChild
+                type={'button'}
+                size={'sm'}
+                variant={'link'}
+                className={'text-xs'}
+              >
+                <Link href={'/auth/password-reset'}>
                   <Trans i18nKey={'auth:passwordForgottenQuestion'} />
-                </Button>
-              </Link>
+                </Link>
+              </Button>
             </FormItem>
           )}
         />
diff --git a/packages/ui/src/makerkit/sidebar.tsx b/packages/ui/src/makerkit/sidebar.tsx
index ce55d6d52..8113c49d0 100644
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -164,14 +164,15 @@ export function SidebarItem({
   const size = collapsed ? 'icon' : 'sm';
 
   return (
-    <Link key={path} href={path}>
-      <Button
-        className={cn('flex w-full text-sm shadow-none', {
-          'justify-start space-x-2': !collapsed,
-        })}
-        size={size}
-        variant={variant}
-      >
+    <Button
+      asChild
+      className={cn('flex w-full text-sm shadow-none', {
+        'justify-start space-x-2': !collapsed,
+      })}
+      size={size}
+      variant={variant}
+    >
+      <Link key={path} href={path}>
         <If condition={collapsed} fallback={Icon}>
           <TooltipProvider>
             <Tooltip>
@@ -185,8 +186,8 @@ export function SidebarItem({
         </If>
 
         <span className={cn({ hidden: collapsed })}>{children}</span>
-      </Button>
-    </Link>
+      </Link>
+    </Button>
   );
 }