From 9159e6e58c9407a4ac164650b8098502e37263e9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 23 May 2026 06:39:11 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20Personal=20?=
 =?UTF-8?q?Rating=20UX=20and=20accessibility=20in=20GameDetailHeader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces several micro-UX and accessibility improvements to the `GameDetailHeader` component:

1.  **Clear Rating Feature**: Added a "Clear Rating" button next to the personal rating slider, allowing users to unset their rating.
2.  **Semantic Elements**: Converted the folder path from a non-semantic `<p>` tag to a proper `<button type="button">` for keyboard accessibility and native interaction.
3.  **ARIA and Screen Reader Support**:
    - Added `aria-label` and `title` to icon-only buttons (Favorite toggle, Clear Rating).
    - Wrapped decorative icons and emojis in `<span aria-hidden="true">` to ensure clean screen reader output.
    - Associated the personal rating slider with its label using `id` and `htmlFor`.
4.  **Internationalization**: Added `clearRating` translation keys for English and French, and fixed a typo in the English `platforms` translation.
5.  **Cleanup**: Removed an unused `hasIgdbId` state in `GameScreenshotsCarousel.tsx` to fix a build error.

These changes improve the overall accessibility and intuitiveness of the game details interface.

Co-authored-by: Gamepulse <8333979+Gamepulse@users.noreply.github.com>
---
 .Jules/palette.md                             |  0
 src/components/Library/GameDetailHeader.tsx   | 38 +++++++++++++------
 .../Library/GameScreenshotsCarousel.tsx       |  2 -
 src/i18n/translations.ts                      |  4 +-
 4 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Library/GameDetailHeader.tsx b/src/components/Library/GameDetailHeader.tsx
index aa3d128..10e0bc1 100644
--- a/src/components/Library/GameDetailHeader.tsx
+++ b/src/components/Library/GameDetailHeader.tsx
@@ -148,11 +148,12 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
               onClick={(e) => { e.stopPropagation(); onFavoriteToggle(); }}
               className="absolute -top-2 -right-2 w-10 h-10 flex items-center justify-center text-3xl transition-transform hover:scale-110"
               title={game.is_favorite ? t('removeFromFavorites') : t('addToFavorites')}
+              aria-label={game.is_favorite ? t('removeFromFavorites') : t('addToFavorites')}
             >
               {game.is_favorite ? (
-                <span className="text-yellow-400 drop-shadow-lg">★</span>
+                <span className="text-yellow-400 drop-shadow-lg" aria-hidden="true">★</span>
               ) : (
-                <span className="text-gray-400 hover:text-yellow-300">☆</span>
+                <span className="text-gray-400 hover:text-yellow-300" aria-hidden="true">☆</span>
               )}
             </button>
           )}
@@ -234,20 +235,21 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
         {game.igdb_id && (
           <button type="button" onClick={handleOpenIgdb}
             className="text-blue-400 hover:text-blue-300 text-sm px-3 py-1.5 bg-blue-900/40 rounded-lg hover:bg-blue-900/60 transition-colors inline-flex items-center gap-1">
-            🌐 {t('igdbPage')} ↗
+            <span aria-hidden="true">🌐</span> {t('igdbPage')} <span aria-hidden="true">↗</span>
           </button>
         )}
 
         {/* Folder path */}
-        <p 
-          className="theme-text-muted text-sm font-mono cursor-pointer hover:text-blue-400 hover:underline transition-colors flex items-center gap-1"
+        <button
+          type="button"
+          className="theme-text-muted text-sm font-mono cursor-pointer hover:text-blue-400 hover:underline transition-colors flex items-center gap-1 w-full text-left bg-transparent border-0 p-0"
           onClick={handleOpenFolder}
           title={t('openFolder') || "Click to open folder"}
         >
-          <span>📁</span>
+          <span aria-hidden="true">📁</span>
           <span className="truncate">{game.folder_path}</span>
-          <span className="text-xs opacity-50">↗</span>
-        </p>
+          <span className="text-xs opacity-50" aria-hidden="true">↗</span>
+        </button>
 
         {/* Status badges */}
         <div className="flex items-center gap-2 flex-wrap">
@@ -364,11 +366,25 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
         {/* Personal Rating */}
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <span className="theme-text-muted text-sm">{t('personalRating')} (0-100): <span className="text-purple-500 font-semibold">{game.personal_rating !== null && game.personal_rating !== undefined ? `${game.personal_rating}/100` : '-'}</span></span>
+            <label htmlFor="personal-rating-slider" className="theme-text-muted text-sm">
+              {t('personalRating')} (0-100): <span className="text-purple-500 font-semibold">{game.personal_rating !== null && game.personal_rating !== undefined ? `${game.personal_rating}/100` : '-'}</span>
+            </label>
+            {game.personal_rating !== null && game.personal_rating !== undefined && (
+              <button
+                type="button"
+                onClick={() => onRatingChange?.(null)}
+                className="text-xs text-red-400 hover:text-red-300 transition-colors flex items-center gap-1"
+                title={t('clearRating')}
+                aria-label={t('clearRating')}
+              >
+                <span aria-hidden="true">✕</span> {t('clearRating')}
+              </button>
+            )}
           </div>
           <div className="flex items-center gap-3">
-            <span className="text-xs theme-text-muted">0</span>
+            <span className="text-xs theme-text-muted" aria-hidden="true">0</span>
             <input
+              id="personal-rating-slider"
               type="range"
               min="0"
               max="100"
@@ -390,7 +406,7 @@ export function GameDetailHeader({ game, onGameUpdated, onPlatformChange, onFilt
                 [&::-moz-range-thumb]:cursor-pointer
                 [&::-moz-range-thumb]:border-0"
             />
-            <span className="text-xs theme-text-muted">100</span>
+            <span className="text-xs theme-text-muted" aria-hidden="true">100</span>
           </div>
         </div>
 
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) {
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 1664377..17d5b4f 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -49,6 +49,7 @@ export const translations = {
     
     // Game Detail
     personalRating: 'Personal Rating',
+    clearRating: 'Clear Rating',
     notes: 'Notes',
     saveNotes: 'Save Notes',
     deleteGame: 'Delete Game',
@@ -291,7 +292,7 @@ export const translations = {
     playTime: 'Play Time',
     hours: 'hours',
     platform: 'Platform',
-    platforms: 'Plateformes',
+    platforms: 'Platforms',
     selectPlatform: 'Select platform...',
     noPlatform: 'No platform',
     availableOnIGDB: 'Available on',
@@ -435,6 +436,7 @@ export const translations = {
     
     // Game Detail
     personalRating: 'Note personnelle',
+    clearRating: 'Effacer la note',
     notes: 'Notes',
     saveNotes: 'Sauvegarder les notes',
     deleteGame: 'Supprimer le jeu',