site: fix a11y issue that <button> is nested inside <a> in homepage (#49848)

* site: fix a11y issue that <button> is nested inside <a>

* Update .dumi/theme/common/LinkButton.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -1,10 +1,9 @@
 import React, { Suspense } from 'react';
-import { Button, ConfigProvider, Flex, Typography } from 'antd';
+import { ConfigProvider, Flex, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { useLocation } from 'dumi';
-
 import useLocale from '../../../../hooks/useLocale';
-import Link from '../../../../theme/common/Link';
+import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import GroupMaskLayer from '../GroupMaskLayer';
@@ -144,14 +143,19 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
           <p>{locale.slogan}</p>
         </Typography>
         <Flex gap="middle" className={styles.btnWrap}>
-          <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
+          <LinkButton
-            <Button size="large" type="primary">
+            size="large"
-              {locale.start}
+            type="primary"
-            </Button>
+            to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
-          </Link>
+          >
-          <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
+            {locale.start}
-            <Button size="large">{locale.designLanguage}</Button>
+          </LinkButton>
-          </Link>
+          <LinkButton
+            size="large"
+            to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
+          >
+            {locale.designLanguage}
+          </LinkButton>
         </Flex>
         <div className={styles.child}>{children}</div>
       </div>

.dumi/pages/index/components/Theme/index.tsx

@@ -10,7 +10,6 @@ import { TinyColor } from '@ctrl/tinycolor';
 import type { MenuProps, ThemeConfig } from 'antd';
 import {
   Breadcrumb,
-  Button,
   Card,
   ConfigProvider,
   Flex,
@@ -29,7 +28,7 @@ import { useLocation } from 'dumi';
 
 import useDark from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
-import Link from '../../../../theme/common/Link';
+import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import { getLocalizedPathname } from '../../../../theme/utils';
 import Group from '../Group';
@@ -518,14 +517,15 @@ const Theme: React.FC = () => {
                   title={locale.myTheme}
                   extra={
                     <Flex gap="small">
-                      <Link to={getLocalizedPathname('/theme-editor', isZhCN, search)}>
+                      <LinkButton to={getLocalizedPathname('/theme-editor', isZhCN, search)}>
-                        <Button type="default">{locale.toDef}</Button>
+                        {locale.toDef}
-                      </Link>
+                      </LinkButton>
-                      <Link
+                      <LinkButton
+                        type="primary"
                         to={getLocalizedPathname('/docs/react/customize-theme', isZhCN, search)}
                       >
-                        <Button type="primary">{locale.toUse}</Button>
+                        {locale.toUse}
-                      </Link>
+                      </LinkButton>
                     </Flex>
                   }
                 >

.dumi/theme/common/Link.tsx

@@ -8,12 +8,13 @@ export interface LinkProps {
   style?: React.CSSProperties;
   className?: string;
   onClick?: MouseEventHandler;
+  component?: React.ComponentType<any>;
 }
 
 nprogress.configure({ showSpinner: false });
 
 const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
-  const { to, children, ...rest } = props;
+  const { to, children, component, ...rest } = props;
   const [isPending, startTransition] = useTransition();
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -48,6 +49,19 @@ const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((
     }
   }, [isPending]);
 
+  if (component) {
+    return React.createElement(
+      component,
+      {
+        ...rest,
+        ref,
+        onClick: handleClick,
+        href,
+      },
+      children,
+    );
+  }
+
   return (
     <DumiLink ref={ref} onClick={handleClick} {...rest} to={href} prefetch>
       {children}

.dumi/theme/common/LinkButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from 'antd';
+import type { ButtonProps } from 'antd';
+import Link from './Link';
+import type { LinkProps } from './Link';
+
+type LinkButtonProps = LinkProps &
+  Readonly<React.PropsWithChildren<Pick<ButtonProps, 'type' | 'size'>>>;
+
+const LinkButton: React.FC<LinkButtonProps> = (props) => <Link component={Button} {...props} />;
+
+export default LinkButton;