🎨 Palette: Improve accessibility for image removal button

[MacTechIN]

💡 What: Improved accessibility for the "remove image" button in src/components/ImageUploader.tsx. Added aria-label attribute, set the inner Lucide icon to aria-hidden="true", and introduced visible keyboard focus states.

🎯 Why: The button was purely visual (an 'X' icon) and had no programmatic name for screen readers, making it unclear to assistive technology users. Additionally, keyboard-only users navigating the interface had no visual indication when the button was focused.

📸 Before/After:

• Before: <button title="Remove"><X /></button>
• After: <button title="Remove" aria-label="Remove" className="... focus-visible:ring-2 ..."><X aria-hidden="true" /></button>

♿ Accessibility:

• Screen readers will now announce "Remove Image" instead of ignoring it or guessing based on the title attribute.
• The X icon is explicitly hidden from the accessibility tree.
• Keyboard navigation now clearly highlights the button using Tailwind's standard focus-visible ring.

---

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

---

Note

Low Risk
UI-only accessibility tweaks with no logic, data, or API changes.

Overview
Improves accessibility for the overlay remove image control in ImageUploader when a preview is shown.

The button gets an aria-label from t('removeImage') so assistive tech has a clear name beyond the icon and title. The Lucide X icon is marked aria-hidden="true" so it isn’t read as redundant content. Keyboard focus is clearer via Tailwind focus-visible ring/offset classes and focus-visible:outline-none on the button.

^{Reviewed by Cursor Bugbot for commit 61beef6. Bugbot is set up for automated code reviews on this repo. Configure here.}

[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 the accessibility of the "remove image" button in the ImageUploader component by adding focus ring styles, an aria-label, and hiding the inner icon from screen readers. The feedback suggests using a highly contrasting focus ring color (such as primary blue instead of red) to ensure the focus indicator is clearly visible on the red button, improving compliance with WCAG accessibility guidelines.

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]

Using a red focus ring (focus-visible:ring-red-500) on a red button (bg-red-500) provides poor contrast and makes the focus indicator difficult to see, especially if the underlying image also contains red tones. To comply with WCAG accessibility guidelines for focus visibility, use a highly contrasting color like the theme's primary blue (focus-visible:ring-primary-blue).

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:ring-red-500 focus-visible:outline-none"
	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-primary-blue focus-visible:outline-none"