From 577bac2bd7dfba4dcaf3772401e6fe6c66e78365 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 7 May 2026 06:34:49 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20GameCard=20keyboard=20?=
 =?UTF-8?q?accessibility=20and=20semantics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert interactive spans to semantic buttons in GameCard
- Add tabIndex and role="button" to GameCard containers
- Implement onKeyDown for card navigation (Enter/Space)
- Add focus-visible styles for better navigation visibility
- Remove unused hasIgdbId state in GameScreenshotsCarousel to fix build

Co-authored-by: Gamepulse <8333979+Gamepulse@users.noreply.github.com>
---
 .Jules/palette.md                             |  3 +
 src/components/Library/GameCard.tsx           | 60 ++++++++++++++-----
 .../Library/GameScreenshotsCarousel.tsx       |  2 -
 3 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..ea026fd
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-14 - [Semantic Buttons and Card Accessibility]
+**Learning:** Using semantic `<button type="button">` instead of `<span>` with `role="button"` provides native keyboard support (Enter/Space) and focusability without manual implementation. For card containers that should be focusable, adding `tabIndex={0}`, `role="button"`, and a targeted `onKeyDown` handler (checking `e.target === e.currentTarget`) ensures the entire card is accessible while preventing nested interactive elements from double-triggering actions.
+**Action:** Always prefer semantic buttons for interactive elements. When making containers focusable, use `e.target === e.currentTarget` in keyboard handlers to avoid event bubbling issues from nested buttons or links.
diff --git a/src/components/Library/GameCard.tsx b/src/components/Library/GameCard.tsx
index f628ab4..ea46c6b 100644
--- a/src/components/Library/GameCard.tsx
+++ b/src/components/Library/GameCard.tsx
@@ -31,8 +31,9 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
     return (
       <div className="flex flex-wrap gap-1 mt-2 pointer-events-auto">
         {displayedTags.map((tag) => (
-          <span
+          <button
             key={tag.id}
+            type="button"
             onClick={(e) => {
               console.log('[GameCard] Click handler fired for tag:', tag.name);
               e.stopPropagation();
@@ -44,11 +45,10 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
                 console.warn('[GameCard] onFilter is undefined!');
               }
             }}
-            className={`relative z-20 px-2 py-0.5 text-xs rounded-full text-white ${getCategoryColor(tag.category)} hover:opacity-80 hover:scale-110 hover:shadow-md transition-all cursor-pointer select-none border border-transparent hover:border-white/30 pointer-events-auto`}
-            role="button"
+            className={`relative z-20 px-2 py-0.5 text-xs rounded-full text-white ${getCategoryColor(tag.category)} hover:opacity-80 hover:scale-110 hover:shadow-md transition-all cursor-pointer select-none border border-transparent hover:border-white/30 pointer-events-auto focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-indigo-500 outline-none`}
           >
             {tag.name}
-          </span>
+          </button>
         ))}
         
         {remainingCount > 0 && (
@@ -73,19 +73,19 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
     return (
       <div className="flex flex-wrap gap-1 mt-1">
         {allMetadata.map((item) => (
-          <span
+          <button
             key={`${item.type}-${item.id}`}
+            type="button"
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
               console.log('[GameCard] Metadata tag clicked:', item.type, item.name);
               onFilter?.(item.type, item.name);
             }}
-            className="px-1.5 py-0.5 text-xs rounded bg-gray-700/50 theme-text-muted hover:bg-indigo-600/30 transition-colors cursor-pointer select-none"
-            role="button"
+            className="px-1.5 py-0.5 text-xs rounded bg-gray-700/50 theme-text-muted hover:bg-indigo-600/30 transition-colors cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-indigo-500 outline-none"
           >
             {item.name}
-          </span>
+          </button>
         ))}
       </div>
     );
@@ -132,18 +132,18 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
     const label = COMPLETION_STATUS_LABELS[completion_status as keyof typeof COMPLETION_STATUS_LABELS] || completion_status;
     
     return (
-      <span
+      <button
+        type="button"
         onClick={(e) => {
           e.stopPropagation();
           e.preventDefault();
           console.log('[GameCard] Status badge clicked:', completion_status);
           onFilter?.('status', completion_status);
         }}
-        className={`absolute top-2 left-2 px-2 py-1 rounded-full text-xs text-white ${statusColors[completion_status] || 'bg-gray-600'} hover:opacity-80 transition-opacity cursor-pointer select-none`}
-        role="button"
+        className={`absolute top-2 left-2 px-2 py-1 rounded-full text-xs text-white ${statusColors[completion_status] || 'bg-gray-600'} hover:opacity-80 transition-opacity cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-indigo-500 outline-none`}
       >
         {label}
-      </span>
+      </button>
     );
   };
 
@@ -166,7 +166,10 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
   if (viewMode === "grid") {
     return (
       <div
-        className="theme-card theme-border border rounded-lg overflow-hidden cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl hover:border-gray-600"
+        className="theme-card theme-border border rounded-lg overflow-hidden cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-indigo-500 outline-none"
+        tabIndex={0}
+        role="button"
+        aria-label={`${display_name}`}
         onClick={(e) => {
           // Don't navigate if clicking on an interactive element
           const target = e.target as HTMLElement;
@@ -177,6 +180,13 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
           console.log('[GameCard] Grid click - navigating to game:', game.id);
           onClick(game.id);
         }}
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick(game.id);
+          }
+        }}
       >
         <div className="relative">
           {renderCover()}
@@ -235,7 +245,10 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
   if (viewMode === "compact") {
     return (
       <div
-        className="theme-card theme-border border rounded-lg overflow-hidden cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg hover:border-gray-600 relative"
+        className="theme-card theme-border border rounded-lg overflow-hidden cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg hover:border-gray-600 relative focus-visible:ring-2 focus-visible:ring-indigo-500 outline-none"
+        tabIndex={0}
+        role="button"
+        aria-label={`${display_name}`}
         onClick={(e) => {
           const target = e.target as HTMLElement;
           if (target.closest('[role="button"]') || target.closest('button') || target.closest('a')) {
@@ -243,6 +256,13 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
           }
           onClick(game.id);
         }}
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick(game.id);
+          }
+        }}
       >
         <div className="relative h-24 bg-gray-800">
           {cover_url ? (
@@ -339,7 +359,10 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
   // List view mode
   return (
     <div
-      className="theme-card theme-border border rounded-lg p-4 flex gap-4 cursor-pointer transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:border-gray-600"
+      className="theme-card theme-border border rounded-lg p-4 flex gap-4 cursor-pointer transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-indigo-500 outline-none"
+      tabIndex={0}
+      role="button"
+      aria-label={`${display_name}`}
       onClick={(e) => {
         const target = e.target as HTMLElement;
         if (target.closest('[role="button"]') || target.closest('button') || target.closest('a')) {
@@ -347,6 +370,13 @@ const GameCard: React.FC<GameCardProps> = ({ game, onClick, viewMode, onFilter,
         }
         onClick(game.id);
       }}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick(game.id);
+        }
+      }}
     >
       <div className="w-32 h-32 flex-shrink-0 relative bg-gray-800 rounded-lg overflow-hidden">
         {cover_url ? (
diff --git a/src/components/Library/GameScreenshotsCarousel.tsx b/src/components/Library/GameScreenshotsCarousel.tsx
index 6a4e37c..bfae3b8 100644
--- a/src/components/Library/GameScreenshotsCarousel.tsx
+++ b/src/components/Library/GameScreenshotsCarousel.tsx
@@ -20,7 +20,6 @@ export function GameScreenshotsCarousel({ gameId }: GameScreenshotsCarouselProps
   const [igdbScreenshots, setIgdbScreenshots] = useState<string[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [loading, setLoading] = useState(true);
-  const [hasIgdbId, setHasIgdbId] = useState(false);
 
   useEffect(() => {
     const loadScreenshots = async () => {
@@ -29,7 +28,6 @@ export function GameScreenshotsCarousel({ gameId }: GameScreenshotsCarouselProps
         // Load game data to check IGDB ID
         try {
           const game = await invoke<{ igdb_id: number | null }>("get_game_by_id", { id: gameId });
-          setHasIgdbId(!!game?.igdb_id);
           
           // Load IGDB screenshots if available
           if (game?.igdb_id) {