From 977cbede1d4117367453a0faf9260c5fd002a592 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 4 May 2026 06:18:35 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20and=20fix=20build=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix TypeScript build error in GameScreenshotsCarousel.tsx by removing unused state.
- Convert non-semantic interactive spans to buttons in GameCard.tsx.
- Add ARIA labels and focus-visible styles to tags and badges.
- Improve keyboard accessibility in GameDetailHeader.tsx.

Co-authored-by: Gamepulse <8333979+Gamepulse@users.noreply.github.com>
---
 .Jules/palette.md                             |  7 +++++
 src/components/Library/GameCard.tsx           | 27 ++++++++++---------
 src/components/Library/GameDetailHeader.tsx   | 16 ++++++++---
 .../Library/GameScreenshotsCarousel.tsx       |  2 --
 4 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..6b89342
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,7 @@
+## 2025-05-14 - [A11y: Semantic Buttons and Focus States]
+**Learning:** Using semantic `<button type="button">` instead of `<span role="button">` provides native keyboard support (Enter/Space) and better screen reader integration. Adding `focus-visible:ring-2` ensures keyboard navigability is visible.
+**Action:** Always prefer `<button>` for interactive elements. Ensure absolute-positioned interactive elements (like badges on cards) have a sufficient `z-index` (e.g., `z-10`) to remain clickable above images.
+
+## 2025-05-14 - [Build: Strict TypeScript Checks]
+**Learning:** The project's production build (`pnpm build`) includes strict TypeScript linting that fails on unused variables or state.
+**Action:** Always run `pnpm build` and `tsc` before submitting to catch unused declarations that might have been left during development or refactoring.
diff --git a/src/components/Library/GameCard.tsx b/src/components/Library/GameCard.tsx
index f628ab4..8bfd387 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,11 @@ 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 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-white pointer-events-auto`}
+            aria-label={`${t('filterByTag')}: ${tag.name}`}
           >
             {tag.name}
-          </span>
+          </button>
         ))}
         
         {remainingCount > 0 && (
@@ -73,19 +74,20 @@ 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-indigo-500"
+            aria-label={`${t(item.type as any)}: ${item.name}`}
           >
             {item.name}
-          </span>
+          </button>
         ))}
       </div>
     );
@@ -132,18 +134,19 @@ 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 z-10 ${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-white`}
+        aria-label={`${t('completionStatus')}: ${label}`}
       >
         {label}
-      </span>
+      </button>
     );
   };
 
diff --git a/src/components/Library/GameDetailHeader.tsx b/src/components/Library/GameDetailHeader.tsx
index aa3d128..4e1bccc 100644
--- a/src/components/Library/GameDetailHeader.tsx
+++ b/src/components/Library/GameDetailHeader.tsx
@@ -276,8 +276,10 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
             {game.genres.map((genre) => (
               <button
                 key={genre.id}
+                type="button"
                 onClick={() => onFilter?.('genre', genre.name)}
-                className="px-2 py-0.5 text-xs rounded-full text-white bg-blue-600 hover:bg-blue-500 transition-opacity cursor-pointer"
+                className="px-2 py-0.5 text-xs rounded-full text-white bg-blue-600 hover:bg-blue-500 transition-opacity cursor-pointer focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900"
+                aria-label={`${t('genre')}: ${genre.name}`}
               >
                 {genre.name}
               </button>
@@ -292,8 +294,10 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
             {game.game_modes.map((mode) => (
               <button
                 key={mode.id}
+                type="button"
                 onClick={() => onFilter?.('mode', mode.name)}
-                className="px-2 py-0.5 text-xs rounded-full text-white bg-purple-600 hover:bg-purple-500 transition-opacity cursor-pointer"
+                className="px-2 py-0.5 text-xs rounded-full text-white bg-purple-600 hover:bg-purple-500 transition-opacity cursor-pointer focus-visible:ring-2 focus-visible:ring-purple-400 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900"
+                aria-label={`${t('gameMode')}: ${mode.name}`}
               >
                 {mode.name}
               </button>
@@ -308,8 +312,10 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
             {game.player_perspectives.map((persp) => (
               <button
                 key={persp.id}
+                type="button"
                 onClick={() => onFilter?.('perspective', persp.name)}
-                className="px-2 py-0.5 text-xs rounded-full text-white bg-green-600 hover:bg-green-500 transition-opacity cursor-pointer"
+                className="px-2 py-0.5 text-xs rounded-full text-white bg-green-600 hover:bg-green-500 transition-opacity cursor-pointer focus-visible:ring-2 focus-visible:ring-green-400 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900"
+                aria-label={`${t('perspective')}: ${persp.name}`}
               >
                 {persp.name}
               </button>
@@ -324,8 +330,10 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
             {game.themes.map((theme) => (
               <button
                 key={theme.id}
+                type="button"
                 onClick={() => onFilter?.('theme', theme.name)}
-                className="px-2 py-0.5 text-xs rounded-full text-white bg-orange-600 hover:bg-orange-500 transition-opacity cursor-pointer"
+                className="px-2 py-0.5 text-xs rounded-full text-white bg-orange-600 hover:bg-orange-500 transition-opacity cursor-pointer focus-visible:ring-2 focus-visible:ring-orange-400 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900"
+                aria-label={`${t('theme')}: ${theme.name}`}
               >
                 {theme.name}
               </button>
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) {