🎨 Palette: [UX improvement] Enhance accessibility and focus states in ImageUploader

[MacTechIN]

💡 What

Added proper keyboard focus indicators (focus-visible) and ARIA labels to the interactive buttons within the ImageUploader component.

🎯 Why

Keyboard users could not easily see which element was focused within the uploader area, and screen reader users lacked context for the icon-only "Remove Image" button. Furthermore, the absolute positioned close button had a visual bug where the standard focus ring would be clipped by its container's overflow-hidden property.

📸 Before/After

(Visuals handled in Playwright verification)

• Before: Navigating via keyboard to the upload buttons showed no clear outline.
• After: Pressing 'Tab' clearly highlights the "Select File" button in blue and the "Remove Image" button in red, without clipping the rings.

♿ Accessibility

• Ensured keyboard focus states are robust.
• Prevented focus ring clipping on absolutely positioned elements using focus-visible:ring-offset-2.
• Added aria-label to the "Remove Image" button and set the visual icon to aria-hidden="true".

---

PR created automatically by Jules for task 10542045704549808756 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 in ImageUploader.tsx by adding focus-visible ring styles to buttons, an aria-label to the image removal button, and aria-hidden="true" to its inner icon. It also documents these learnings in .Jules/palette.md. The review feedback suggests replacing literal \n escape sequences in .Jules/palette.md with actual newlines to fix markdown formatting.

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]

The markdown file contains literal \n escape sequences instead of actual newlines. This makes the document hard to read and improperly formatted. Please replace the literal \n sequences with actual line breaks.

Suggested change

	## 2024-05-18 - [Initial Learnings]\n**Learning:** The application uses a custom `useLanguage` hook for i18n, and translations are hardcoded in `src/lib/i18n.ts`. Icon-only buttons must have an explicit `aria-label` utilizing the `t()` translation function.\n**Action:** Apply translations to all new ARIA labels added.
	## 2024-05-18 - [Initial Learnings]
	**Learning:** The application uses a custom 'useLanguage' hook for i18n, and translations are hardcoded in 'src/lib/i18n.ts'. Icon-only buttons must have an explicit 'aria-label' utilizing the 't()' translation function.
	**Action:** Apply translations to all new ARIA labels added.