🎨 Palette: Enhance 'Remove Image' button accessibility

[MacTechIN]

💡 What:
Added screen reader and keyboard accessibility support to the "Remove Image" icon-only button in the ImageUploader component.

🎯 Why:
The absolute-positioned icon-only button lacked an explicit accessible name for screen readers, and its internal icon was redundantly exposed to accessibility APIs. Furthermore, since the button sits within an overflow-hidden container, standard focus rings would clip. Adding proper ARIA attributes and offset focus rings ensures all users can navigate and operate the button efficiently.

📸 Before/After:
(Visual changes mainly apply to keyboard focus state)

• Before: Keyboard focus indicator clipped or invisible. Screen readers read "X" or unlabelled button.
• After: Clear red focus ring with offset around the button. Screen readers correctly announce "Remove Image".

♿ Accessibility:

• Added aria-label utilizing translation strings.
• Added aria-hidden="true" to the internal Lucide <X> icon.
• Added Tailwind focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500 to prevent ring clipping and match the destructive intent of the action.
• Logged critical learning regarding absolute positioned buttons in overflow-hidden containers to .Jules/palette.md.

---

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

---

Note

Low Risk
Localized UI accessibility tweaks with no auth, data, or API changes.

Overview
Improves keyboard and screen-reader use of the Remove image control on ImageUploader when a preview is shown.

The icon-only clear button gets an aria-label from t('removeImage'), the Lucide X is marked aria-hidden, and Tailwind focus-visible ring styles (with offset and red ring) so the focus indicator stays visible over the overflow-hidden preview frame. A short note in .Jules/palette.md records the overflow/focus-ring pattern for future overlay buttons.

^{Reviewed by Cursor Bugbot for commit b33896d. 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.

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_eb64787d-55e8-441f-a57c-38ceb5bd015a)

[gemini-code-assist]

Code Review

This pull request improves the accessibility of the image removal button in ImageUploader.tsx by adding focus ring styles, an aria-label, and hiding the inner icon from screen readers, alongside documenting these learnings in .Jules/palette.md. The feedback recommends adding an explicit type="button" attribute to the button to prevent unintended form submissions if the component is used inside a form.

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 button is missing an explicit type="button" attribute. In HTML/React, buttons without a specified type default to type="submit". If this ImageUploader component is used inside a <form>, clicking the "Remove Image" button will trigger an unintended form submission instead of just clearing the image.

            type="button"
            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:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500"
            title={t('removeImage')}
            aria-label={t('removeImage')}