🎨 Palette: Improve keyboard accessibility on ImageUploader

[MacTechIN]

💡 What:

• Added robust focus rings to the 'Select File' and 'Remove Image' buttons using Tailwind's focus-visible utilities.
• Implemented an aria-label for the 'Remove Image' button, correctly hidden its interior <X> element from screen readers, and removed the hidden file input from the tab index.

🎯 Why:

• Keyboard users had poor visual feedback on the 'Select File' button and completely lacked context/navigation for the 'Remove Image' absolute-positioned button when using screen readers.
• Hidden file inputs can sometimes inadvertently catch focus and confuse screen reader sequences if not explicitly excluded using standard web attributes.

📸 Before/After:
No dramatic structural visual changes. Focus rings now appear cleanly without clipping for tab-key users.

♿ Accessibility:

• Added screen reader support for the icon-only Remove Image action.
• Prevented potential dead-zones in keyboard navigation by assigning explicit tabIndex limitations.
• Enforced high-contrast focus rings ensuring users navigating via tab can confidently interact with standard forms and overlay action buttons.

---

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

---

Note

Low Risk
UI-only accessibility attributes and focus styles; no upload, state, or API logic changes.

Overview
ImageUploader gets keyboard and screen-reader fixes without changing upload behavior.

The Select file control and the overlay Remove image button now use Tailwind focus-visible rings (blue vs red) so tab users get visible focus, including on the clipped overlay button. The hidden file input is removed from the tab order with tabIndex={-1} and aria-hidden="true". The icon-only remove control gains aria-label and the X icon is marked aria-hidden.

A .Jules/palette.md note captures these patterns for future hidden inputs and overlay buttons.

^{Reviewed by Cursor Bugbot for commit 08169bd. 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 accessibility and focus states in the ImageUploader component, and documents these learnings in .Jules/palette.md. Specifically, it adds focus-visible rings to buttons, hides the visually hidden file input from keyboard navigation and screen readers, and adds accessible attributes to the image removal button. The reviewer pointed out that having both title and aria-label with the same value on the removal button can cause screen readers to announce the label twice, and suggested removing the redundant aria-label.

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]

Having both title and aria-label with the exact same value on an interactive element can cause some screen readers (such as NVDA or VoiceOver) to announce the label twice, leading to a redundant and confusing user experience.

Since the button has no other text content (the <X> icon is correctly marked with aria-hidden="true"), the title attribute already acts as the accessible name for the button. Therefore, aria-label is redundant and can be safely removed to prevent double announcements while retaining the hover tooltip.

Suggested change

	title={t('removeImage')}
	aria-label={t('removeImage')}
	>
	title={t('removeImage')}
	>