🎨 Palette: [a11y] Improve keyboard accessibility and screen reader support for image uploader

[MacTechIN]

💡 What:
Added proper ARIA labels, aria-hidden attributes to purely decorative icons, and distinct keyboard focus rings (focus-visible) to the interactive elements (buttons) in the ImageUploader component. Also initialized the .Jules/palette.md UX journal.

🎯 Why:
Icon-only buttons like the "Remove Image" (X) button lacked accessible names, making them difficult for screen reader users to understand. Additionally, users navigating via keyboard could not easily see which element in the uploader currently had focus due to missing outline styles.

📸 Before/After:

• Before: Keyboard focus ring on the 'Remove Image' button was either missing or clipped. The button only had a title attribute.
• After: Keyboard focus rings are clearly visible using Tailwind's focus-visible:ring-2 focus-visible:ring-offset-2 (red for destructive actions like remove, blue for primary actions like select). The remove button now has an explicit aria-label.

♿ Accessibility:

• Added aria-label={t('removeImage')} to the icon-only remove button.
• Added aria-hidden="true" to the internal Lucide X icon.
• Added focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500 to the remove button.
• Added focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 to the "Select File" button.
• Added defensive tabIndex={-1} and aria-hidden="true" to the visually hidden file input.

---

PR created automatically by Jules for task 4750747775873679249 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 keyboard accessibility and screen reader support for the ImageUploader component by adding focus-visible rings, ARIA labels, and hiding decorative icons. Feedback on these changes suggests correcting the documentation in .Jules/palette.md to accurately describe how focus ring clipping is avoided (by placing the button as a sibling to, rather than inside, the overflow-hidden container). Additionally, the reviewer noted that adding tabIndex={-1} and aria-hidden="true" to the file input is redundant since it is already hidden via CSS (display: none).

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 and action points state that the absolute positioned overlay button is within an overflow-hidden container and that shadow-lg helps prevent focus ring clipping.

However, in ImageUploader.tsx (lines 104-112), the button is actually a sibling of the overflow-hidden container (line 105), placed inside the outer relative container (line 104) which does not have overflow-hidden. This is the actual reason why the focus ring is not clipped.

Additionally, shadow-lg (box-shadow) does not prevent clipping if an element is truly inside an overflow-hidden container; box-shadows are also clipped by overflow: hidden.

It is recommended to update this journal entry to accurately reflect the DOM structure to avoid misleading future developers.

Suggested change

	**Learning:** For absolute positioned overlay buttons (e.g., over images) within `overflow-hidden` containers, standard focus rings can clip. Added `tabIndex={-1}` and `aria-hidden="true"` to hidden file inputs for defense.
	**Action:** Use Tailwind classes `focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none` combined with `shadow-lg` to prevent focus ring clipping. Use `focus-visible:ring-red-500` for destructive actions. Apply these defensively on interactive elements.
	**Learning:** For absolute positioned overlay buttons (e.g., over images), placing them as siblings to (rather than children of) overflow-hidden containers prevents their focus rings from being clipped. Added tabIndex={-1} and aria-hidden="true" to hidden file inputs for defense.
	**Action:** Position overlay buttons outside of overflow-hidden sibling containers to prevent focus ring clipping. Use Tailwind classes focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none and focus-visible:ring-red-500 for destructive actions.

[gemini-code-assist]

Since the <input type="file"> element has className="hidden" (which translates to display: none in Tailwind), it is already completely removed from the document flow, tab order, and accessibility tree by the browser.

Therefore, adding tabIndex={-1} and aria-hidden="true" is redundant and unnecessary. We can safely remove these attributes to keep the markup clean.