From 0085e129a65f5be7d36ee3fb30fd411442ad4d0b Mon Sep 17 00:00:00 2001
From: Mayank Kumar Chaudhari <mayank.srmu@gmail.com>
Date: Thu, 7 Dec 2023 15:10:03 +0530
Subject: [PATCH] change color-switch to button

---
 .../src/client/color-switch/color-switch.test.tsx           | 3 +++
 .../nextjs-themes/src/client/color-switch/color-switch.tsx  | 6 ++----
 packages/nextjs-themes/src/styles.css                       | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx b/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx
index 357d6e1b..4298e3c4 100644
--- a/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx
+++ b/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx
@@ -7,6 +7,7 @@ describe("color-switch", () => {
 
   test("color-scheme-toggle", ({ expect }) => {
     const hook = renderHook(() => useTheme());
+    act(() => hook.result.current.setColorSchemePref(""));
     render(<ColorSwitch />);
     const element = screen.getByTestId("color-switch");
     act(() => fireEvent.click(element));
@@ -15,5 +16,7 @@ describe("color-switch", () => {
     expect(hook.result.current.colorSchemePref).toBe("light");
     act(() => fireEvent.click(element));
     expect(hook.result.current.colorSchemePref).toBe("system");
+    act(() => fireEvent.click(element));
+    expect(hook.result.current.colorSchemePref).toBe("dark");
   });
 });
diff --git a/packages/nextjs-themes/src/client/color-switch/color-switch.tsx b/packages/nextjs-themes/src/client/color-switch/color-switch.tsx
index 9a240af2..4bf00480 100644
--- a/packages/nextjs-themes/src/client/color-switch/color-switch.tsx
+++ b/packages/nextjs-themes/src/client/color-switch/color-switch.tsx
@@ -35,15 +35,13 @@ export function ColorSwitch({ size = 25 }: ColorSwitchProps) {
     }
   };
   return (
-    <div
+    <button
       className="nextjs-themes--color-switch"
       data-testid="color-switch"
       onClick={toggleColorScheme}
-      onKeyUp={e => e.key === "Enter" && toggleColorScheme()}
-      role="button"
+      type="button"
       // @ts-expect-error -- setting custom attribute
       style={{ "--size": `${size}px` }}
-      tabIndex={0}
     />
   );
 }
diff --git a/packages/nextjs-themes/src/styles.css b/packages/nextjs-themes/src/styles.css
index 1905a738..d0b40c2e 100644
--- a/packages/nextjs-themes/src/styles.css
+++ b/packages/nextjs-themes/src/styles.css
@@ -1,4 +1,5 @@
 .nextjs-themes--color-switch {
+  all: unset;
   position: relative;
   box-shadow: none;
   color: #aaa;