🎨 Palette: Add ARIA labels and focus rings to AgentCard

[bobdivx]

💡 What: Added standard aria-labels to the start/stop/config icon-only buttons in AgentCard. Applied aria-hidden="true" to their internal SVGs to prevent redundant screen reader announcements, and added standard focus-visible:ring-2 focus-visible:ring-[#175B37] utility classes for keyboard navigation.

🎯 Why: The start/stop/config buttons were icon-only without aria-labels or hover/focus indicators, making them difficult to interact with for keyboard users and those relying on screen readers.

♿ Accessibility:

• Added aria-label to "Lancer une mission", "Arrêter", and "Configurer cet agent" buttons.
• Added aria-hidden="true" to SVG elements within buttons.
• Added focus-visible styling for robust keyboard focus tracking.

---

PR created automatically by Jules for task 568611926483936577 started by @bobdivx

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
forge	Ready	Preview, Comment	May 27, 2026 5:17pm

[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 formats the AgentCard.tsx component and improves accessibility by adding focus rings, ARIA labels, and hiding decorative SVGs from screen readers on the action buttons. The reviewer suggests extending these accessibility improvements to the model selection dropdown by adding a focus ring and an ARIA label.

[gemini-code-assist]

The model selection <select> element has outline-none but lacks any focus indicator (such as a focus ring) and an aria-label. Since this PR focuses on improving accessibility and keyboard navigation by adding focus rings and ARIA labels, we should also apply these to the model selection dropdown to ensure it is fully accessible to keyboard and screen reader users.

Suggested change

	<div class="mt-0.5 max-w-[145px]" onClick={(e) => e.preventDefault()}>
	<select
	class="max-w-full cursor-pointer appearance-none truncate border-none bg-transparent pr-2 text-right font-mono text-[9px] text-gray-500 outline-none hover:text-gray-900"
	value={agent.model || "Auto"}
	onChange={(e) => onModelChange?.(agent.id, (e.currentTarget as HTMLSelectElement).value)}
	onChange={(e) =>
	onModelChange?.(
	agent.id,
	(e.currentTarget as HTMLSelectElement).value,
	)
	}
	title="Modifier le modèle"
	>
	<div class="mt-0.5 max-w-[145px]" onClick={(e) => e.preventDefault()}>
	<select
	class="max-w-full cursor-pointer appearance-none truncate border-none bg-transparent pr-2 text-right font-mono text-[9px] text-gray-500 outline-none hover:text-gray-900 focus-visible:ring-2 focus-visible:ring-[#175B37] focus-visible:outline-none"
	value={agent.model || "Auto"}
	onChange={(e) =>
	onModelChange?.(
	agent.id,
	(e.currentTarget as HTMLSelectElement).value,
	)
	}
	title="Modifier le modèle"
	aria-label="Modifier le modèle"
	>