change color-switch to button

react18-tools · Dec 7, 2023 · 0085e12 · 0085e12
1 parent 28f0f52
commit 0085e12
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 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
@@ -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
@@ -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
@@ -1,4 +1,5 @@
 .nextjs-themes--color-switch {
+  all: unset;
   position: relative;
   box-shadow: none;
   color: #aaa;