🎨 Palette: [Accessibility] Improve keyboard focus and screen reader support for image uploader

[MacTechIN]

💡 What: Added ARIA labels, aria-hidden attributes to SVGs, and explicit focus-visible ring styles to the interactive buttons within ImageUploader.tsx. Created a journal entry in .Jules/palette.md to document the learnings regarding absolute positioned overlay buttons inside overflow-hidden containers.

🎯 Why: Absolute positioned overlay buttons within overflow-hidden containers (like the "Remove Image" button) are prone to their default browser focus rings being clipped or becoming invisible. This makes keyboard navigation very difficult. Furthermore, icon-only buttons need explicit ARIA labels and their inner SVG icons should be hidden from screen readers.

♿ Accessibility:

• Added aria-label={t('removeImage')} to the "Remove Image" button for screen reader support.
• Added aria-hidden="true" to the X icon inside the "Remove Image" button.
• Applied focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none with appropriate colors (blue for select, red for delete) to ensure keyboard focus states are clearly visible.

---

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

---

Note

Low Risk
Presentation and ARIA-only changes in a single UI component; upload/clear behavior is unchanged.

Overview
Improves keyboard and screen reader support for the file picker and remove-image controls in ImageUploader.

The Select file button and the overlay Remove image button now use explicit focus-visible ring styles (blue vs red) so focus is visible even when rings would otherwise be clipped near overflow-hidden image containers. The icon-only remove control gets aria-label={t('removeImage')} and the X icon is marked aria-hidden="true".

A .Jules/palette.md entry documents the pattern for future overlay buttons on images.

^{Reviewed by Cursor Bugbot for commit 121624e. 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 keyboard focus and screen reader accessibility for the image uploader component by adding Tailwind focus-visible ring styles, an explicit ARIA label, and hiding the inner SVG icon from screen readers. It also documents these accessibility learnings. The review feedback suggests correcting a layout description in the documentation and removing a redundant title attribute on the remove button to prevent potential double-announcements by screen readers.

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 learning mentions that the 'Remove Image' button is within an overflow-hidden container. However, in ImageUploader.tsx, the button is actually a sibling of the overflow-hidden container (which only wraps the img element) and is placed inside a parent relative container without overflow-hidden. Therefore, the focus ring is not clipped by overflow-hidden in this case. We should update this documentation to reflect the actual layout structure to avoid misleading future developers.

Suggested change

	**Learning:** Absolute positioned overlay buttons within `overflow-hidden` containers (like the "Remove Image" button in `ImageUploader`) are prone to their default browser focus rings being clipped or becoming invisible. This makes keyboard navigation difficult. Furthermore, icon-only buttons need explicit ARIA labels, and their inner SVG icons should be hidden with `aria-hidden="true"`.
	**Learning:** Absolute positioned overlay buttons placed near or within containers with overflow restrictions (like `overflow-hidden`) can have their focus rings clipped or hidden, making keyboard navigation difficult. Furthermore, icon-only buttons need explicit ARIA labels, and their inner SVG icons should be hidden with `aria-hidden='true'`.

[gemini-code-assist]

Having both title and aria-label with the exact same value can cause some screen readers to announce the label twice (double-announcement). Since aria-label is the standard way to provide an accessible name for icon-only buttons, and title tooltips are generally not accessible to keyboard or mobile users, it is recommended to remove the title attribute to ensure a cleaner screen reader experience.

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"
	title={t('removeImage')}
	aria-label={t('removeImage')}
	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"
	aria-label={t('removeImage')}