🎨 Palette: Improve keyboard accessibility on ImageUploader

.Jules/palette.md

@@ -0,0 +1,10 @@
+## 2024-06-24 - Hidden File Input and Overlay Button Focus
+
+**Learning:**
+- Hidden file inputs (`className="hidden"`) can still receive keyboard focus if they don't explicitly have `tabIndex={-1}` and `aria-hidden="true"`, causing a confusing focus state for screen reader and keyboard users.
+- Absolute positioned icon-only buttons overlaying images within `overflow-hidden` containers lose their default focus rings due to clipping.
+
+**Action:**
+- Always explicitly add `tabIndex={-1}` and `aria-hidden="true"` to visually hidden file inputs to ensure they are excluded from keyboard navigation and screen readers.
+- For overlay buttons, use Tailwind focus utility classes (e.g., `focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none`) combined with `shadow-lg` to prevent the focus ring from clipping and ensure visibility. Ensure the ring color matches the action context (e.g., `ring-red-500` for destructive, `ring-blue-500` for standard actions).
+- Always ensure icon-only buttons have an explicit `aria-label` and `aria-hidden="true"` on the internal SVG/icon component.

src/components/ImageUploader.tsx

@@ -83,7 +83,7 @@ export function ImageUploader({ onImageLoad, currentImage, onClear }: ImageUploa
           <p className="text-xs text-gray-500 mb-3 sm:mb-4">{t('supportedFormats')}</p>
           <button
             onClick={() => fileInputRef.current?.click()}
-            className="px-3 sm:px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:scale-95 transition-all"
+            className="px-3 sm:px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:scale-95 transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 focus-visible:outline-none"
           >
             {t('selectFile')}
           </button>
@@ -92,6 +92,8 @@ export function ImageUploader({ onImageLoad, currentImage, onClear }: ImageUploa
             type="file"
             accept="image/*"
             className="hidden"
+            tabIndex={-1}
+            aria-hidden="true"
             onChange={(e) => {
               const file = e.target.files?.[0];
               if (file) handleFileSelect(file);
@@ -109,10 +111,11 @@ export function ImageUploader({ onImageLoad, currentImage, onClear }: ImageUploa
           </div>
           <button
             onClick={onClear}
-            className="absolute top-2 right-2 p-1.5 sm:p-2 bg-red-500 text-white rounded-full hover:bg-red-600 active:scale-95 transition-all shadow-lg"
+            className="absolute top-2 right-2 p-1.5 sm:p-2 bg-red-500 text-white rounded-full hover:bg-red-600 active:scale-95 transition-all shadow-lg focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500 focus-visible:outline-none"
             title={t('removeImage')}
+            aria-label={t('removeImage')}
           >
-            <X size={16} className="sm:w-5 sm:h-5" />
+            <X size={16} className="sm:w-5 sm:h-5" aria-hidden="true" />
           </button>
         </div>
       )}