🎨 Palette: Improve ImageUploader accessibility

[MacTechIN]

💡 What:
Improved the accessibility of the ImageUploader component, specifically the "remove image" button and the hidden file input.

🎯 Why:

• The "Remove Image" button was an icon-only button without an accessible name (aria-label), making it unreadable for screen readers.
• The button lacked proper keyboard focus indicators, which was especially problematic because it is absolutely positioned over the image inside an overflow-hidden container. Standard focus rings would clip.
• The hidden file input lacked defensive accessibility attributes.

📸 Before/After:

• The button is visually unchanged until focused by a keyboard user, at which point a distinct red focus ring with an offset appears to clearly indicate the current focus state and the destructive nature of the action.

♿ Accessibility:

• Added aria-label={t('removeImage')} to the clear button.
• Added aria-hidden="true" to the internal <X /> icon.
• Defensively added tabIndex={-1} and aria-hidden="true" to the hidden file input.
• Added Tailwind classes: focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none focus-visible:ring-red-500 to prevent clipping and ensure high visibility during keyboard navigation.

---

PR created automatically by Jules for task 13131373818286457269 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 improves accessibility in the ImageUploader component by adding ARIA attributes and focus ring styling, and documents these practices in palette.md. Feedback includes removing an accidentally committed nextjs.log file and explicitly setting type="button" on the clear button to prevent accidental form submissions.

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 nextjs.log file appears to be a local development log and should not be committed to the repository. Please remove this file and add *.log or nextjs.log to your .gitignore file to prevent it from being tracked in the future.

[gemini-code-assist]

The button does not have an explicit type attribute. In HTML/React, buttons default to type="submit" when placed inside a form, which can cause unintended form submissions when clicked. It is a best practice to explicitly set type="button" for non-submitting buttons.

Suggested change

	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:outline-none focus-visible:ring-red-500"
	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:outline-none focus-visible:ring-red-500"
	type="button"