Skip to content

🎨 Palette: Add ARIA labels to icon-only buttons #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bobdivx wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

🎨 Palette: Add ARIA labels to icon-only buttons #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2026-05-15 - Adding aria-label and title to icon-only buttons
**Learning:** Found several modal and tab files using pure SVG icon buttons with no aria-label or title. These components need an accessible name for screen readers. Using both `aria-label` (for screen readers) and `title` (for mouse hover tooltips) provides a universally better experience.
**Action:** When adding icon-only buttons in future features, make sure they have localized (e.g. French) aria-label and title attributes.
2 changes: 1 addition & 1 deletion src/components/apps/AppLogsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export default function AppLogsPage({ appName, initialServerId }: Props) {
<span class="text-gray-600 text-[10px]">
{displayLines.length}/{lines.length}
</span>
<button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs">✕</button>
<button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs" aria-label="Effacer le filtre" title="Effacer le filtre">✕</button>
</>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/apps/GithubImportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function GithubImportModal() {
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z" /></svg>
Importer un dépôt
</h2>
<button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors">
<button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer" title="Fermer">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/costs/CostsDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ function BudgetModal({
<div class="bg-white rounded-[2rem] shadow-2xl p-8 w-full max-w-md space-y-5">
<div class="flex items-center justify-between">
<h3 class="text-xl font-bold text-gray-900">Budget — <span class="font-mono text-[#175B37]">{agent.agentId}</span></h3>
<button onClick={onClose} class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
<button onClick={onClose} class="text-gray-400 hover:text-gray-600 text-2xl leading-none" aria-label="Fermer" title="Fermer">&times;</button>
</div>

<div class="space-y-4">
Expand Down
4 changes: 2 additions & 2 deletions src/components/settings/OllamaTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,10 +438,10 @@ export default function OllamaTab() {
<button onClick={() => toggleInstance(inst)} class={`text-[10px] font-bold px-3 py-1 rounded-full border transition-colors ${inst.enabled ? 'border-amber-200 text-amber-700 hover:bg-amber-50' : 'border-green-200 text-green-700 hover:bg-green-50'}`}>
{inst.enabled ? 'Désactiver' : 'Activer'}
</button>
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors">
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors" aria-label="Modifier" title="Modifier">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Pour améliorer l'accessibilité dans une liste d'éléments, il est recommandé d'utiliser des étiquettes contextuelles. En incluant le nom de l'instance (inst.name) dans l'attribut aria-label, vous permettez aux utilisateurs de lecteurs d'écran de distinguer les boutons entre eux sans ambiguïté. Il serait également judicieux d'ajouter aria-hidden="true" à la balise <svg> (ligne suivante) pour éviter qu'elle ne soit interprétée inutilement par les technologies d'assistance.

Suggested change
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors" aria-label="Modifier" title="Modifier">
<button onClick={() => startEdit(inst)} class="p-2 text-gray-400 hover:text-gray-600 transition-colors" aria-label={`Modifier ${inst.name}`} title={`Modifier ${inst.name}`}>

<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
</button>
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors">
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors" aria-label="Supprimer" title="Supprimer">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Comme pour le bouton de modification, l'ajout du nom de l'instance dans l'attribut aria-label fournit un contexte essentiel. Cela permet aux utilisateurs de technologies d'assistance d'identifier immédiatement quelle instance est concernée par l'action de suppression, ce qui est particulièrement important pour des actions potentiellement destructives.

Suggested change
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors" aria-label="Supprimer" title="Supprimer">
<button onClick={() => deleteInstance(inst.id)} class="p-2 text-gray-400 hover:text-red-600 transition-colors" aria-label={`Supprimer ${inst.name}`} title={`Supprimer ${inst.name}`}>

<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
</button>
</div>
Expand Down