🎨 Palette: [Accessibility] Improve ImageUploader component keyboard and screen reader support

[MacTechIN]

💡 What

Improved the accessibility of the ImageUploader component by ensuring hidden elements are properly ignored by assistive technologies and by adding robust focus-visible styles to the icon-only remove image button.

🎯 Why

• The hidden <input type="file"> could potentially cause issues for screen readers without proper aria-hidden and tabIndex attributes.
• The "Remove Image" button had no proper aria-label and the focus ring was clipped by the container bounds when navigated via keyboard.

📸 Before/After

• A focus ring with an offset and shadow is now visibly active around the red remove button when keyboard-navigated.

♿ Accessibility

• Added tabIndex={-1} and aria-hidden="true" to hidden file input.
• Added explicit aria-label to remove button using translated strings.
• Hid decorative inner <X> icon from screen readers using aria-hidden="true".
• Improved keyboard navigation by adding focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-red-500 avoiding the clipping of the overflow-hidden image container.

---

PR created automatically by Jules for task 3044019601664022386 started by @MacTechIN

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Code Review

This pull request enhances accessibility and focus styles in the ImageUploader component by adding appropriate ARIA attributes, setting tab indices, and styling the focus ring on the image removal button. It also documents these layout learnings in a markdown file. The review feedback points out a duplicate interface declaration in ImageUploader.tsx and notes an inaccuracy in the learning log regarding the DOM structure of the button relative to the overflow-hidden container.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

While reviewing the changes in this file, I noticed a duplicate declaration of the ImageUploaderProps interface at the top of the file (lines 4-8 and lines 12-16), with an import statement (import { useLanguage } from '@/lib/i18n';) placed in between them.

This is redundant and can lead to maintenance issues or confusion. Please remove the duplicate interface declaration and move the import statement to the top of the file with the other imports.

[gemini-code-assist]

In the learning log, it mentions that the absolute positioned button is inside a container with overflow-hidden. However, looking at the implementation in ImageUploader.tsx, the button is actually a sibling of the overflow-hidden container, both wrapped inside a parent relative container:

<div className="relative">
  <div className="border-2 border-gray-300 rounded-lg overflow-hidden">
    <img ... />
  </div>
  <button ... />
</div>

Since the button is outside the overflow-hidden container, its focus ring would not be clipped by it anyway. Please update the learning log to accurately reflect the DOM structure used here.