From fd2cea8f477b8d20b645212e85f8ce92a4f2b04a Mon Sep 17 00:00:00 2001
From: valknarness <valknarness@pivoine.art>
Date: Fri, 7 Nov 2025 13:53:23 +0100
Subject: [PATCH] fix: resolve hydration errors in playground

- Fix nested button error in color history by using div with role=button
- Add keyboard accessibility (Enter/Space) to color history swatches
- Add type guard for ColorInfo.name to handle object values
- Add aria-label to remove button for better accessibility

Fixes React hydration errors and improves accessibility.
---
 app/playground/page.tsx        | 14 +++++++++++---
 components/color/ColorInfo.tsx |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 458dcb3..75889b4 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -137,12 +137,19 @@ function PlaygroundContent() {
                 </div>
                 <div className="grid grid-cols-5 gap-2">
                   {recentColors.map((entry) => (
-                    <button
+                    <div
                       key={entry.timestamp}
-                      className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring"
+                      className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 cursor-pointer"
                       style={{ backgroundColor: entry.color }}
                       onClick={() => setColor(entry.color)}
                       title={entry.color}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          setColor(entry.color);
+                        }
+                      }}
                     >
                       <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30 rounded-lg">
                         <button
@@ -152,11 +159,12 @@ function PlaygroundContent() {
                             toast.success('Color removed from history');
                           }}
                           className="p-1 bg-destructive rounded-full hover:bg-destructive/80"
+                          aria-label="Remove color"
                         >
                           <X className="h-3 w-3 text-destructive-foreground" />
                         </button>
                       </div>
-                    </button>
+                    </div>
                   ))}
                 </div>
               </div>
diff --git a/components/color/ColorInfo.tsx b/components/color/ColorInfo.tsx
index 08ea95a..e9b8bdc 100644
--- a/components/color/ColorInfo.tsx
+++ b/components/color/ColorInfo.tsx
@@ -80,7 +80,7 @@ export function ColorInfo({ info, className }: ColorInfoProps) {
           <div className="text-xs text-muted-foreground">Type</div>
           <div className="text-sm font-medium">{info.is_light ? 'Light' : 'Dark'}</div>
         </div>
-        {info.name && (
+        {info.name && typeof info.name === 'string' && (
           <div className="space-y-1">
             <div className="text-xs text-muted-foreground">Named</div>
             <div className="text-sm font-medium">{info.name}</div>