From 3d9046d079184a87b998aef9a9e67261f43a26a6 Mon Sep 17 00:00:00 2001
From: Wuxh <wxh1220@gmail.com>
Date: Sun, 4 Dec 2022 01:05:33 +0800
Subject: [PATCH] docs: improve  preview interaction (#38802)

docs: improve preview interaction
---
 .../index/components/Theme/ColorPicker.tsx    | 18 ++++++++++--
 .../index/components/Theme/ThemePicker.tsx    | 29 ++++++++++++-------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
index c7772ab050..3a817f5d89 100644
--- a/.dumi/pages/index/components/Theme/ColorPicker.tsx
+++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -18,6 +18,17 @@ const useStyle = () => {
       border-radius: 100%;
       cursor: pointer;
       transition: all ${token.motionDurationFast};
+      display: inline-block;
+
+      & > input[type="radio"] {
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
+
+      &:focus-within {
+        // need ？
+      }
     `,
 
     colorActive: css`
@@ -91,7 +102,8 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
       <Space size="middle">
         {matchColors.map(({ color, active, picker }) => {
           let colorNode = (
-            <div
+            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            <label
               key={color}
               css={[style.color, active && style.colorActive]}
               style={{
@@ -102,7 +114,9 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                   onChange?.(color);
                 }
               }}
-            />
+            >
+              <input type="radio" name={picker ? 'picker' : 'color'} tabIndex={picker ? -1 : 0} />
+            </label>
           );
 
           if (picker) {
diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
index 5b24c120d9..b9fa6e7443 100644
--- a/.dumi/pages/index/components/Theme/ThemePicker.tsx
+++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -37,6 +37,13 @@ const useStyle = () => {
       cursor: pointer;
       transition: all ${token.motionDurationSlow};
       overflow: hidden;
+      display: inline-block;
+
+      & > input[type="radio"] {
+        width: 0;
+        height: 0;
+        opacity: 0;
+      }
 
       img {
         vertical-align: top;
@@ -44,6 +51,7 @@ const useStyle = () => {
           0 9px 28px 8px rgba(0, 0, 0, 0.05);
       }
 
+      &:focus-within,
       &:hover {
         transform: scale(1.04);
       }
@@ -54,7 +62,7 @@ const useStyle = () => {
         0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
 
       &,
-      &:hover {
+      &:hover:not(:focus-within) {
         transform: scale(1);
       }
     `,
@@ -79,15 +87,16 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
 
         return (
           <Space key={theme} direction="vertical" align="center">
-            <div css={[style.themeCard, value === theme && style.themeCardActive]}>
-              <img
-                src={url}
-                onClick={() => {
-                  onChange?.(theme);
-                }}
-                alt=""
-              />
-            </div>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+            <label
+              css={[style.themeCard, value === theme && style.themeCardActive]}
+              onClick={() => {
+                onChange?.(theme);
+              }}
+            >
+              <input type="radio" name="theme" />
+              <img src={url} alt={theme} />
+            </label>
             <span>{locale[theme as keyof typeof locale]}</span>
           </Space>
         );