🎨 Palette: Add ARIA labels to icon-only buttons#36
Conversation
Added missing `aria-label` and `title` attributes to icon-only buttons across multiple components to improve accessibility and user experience. Screen readers will now be able to read these actions correctly, and mouse users will see helpful tooltips.
* `src/components/settings/OllamaTab.tsx`: Added to edit ("Modifier") and delete ("Supprimer") buttons.
* `src/components/apps/GithubImportModal.tsx`: Added to close ("Fermer") button.
* `src/components/apps/AppLogsPage.tsx`: Added to clear filter ("Effacer le filtre") button.
* `src/components/costs/CostsDashboard.tsx`: Added to close ("Fermer") button.
Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves accessibility across several components by adding aria-label and title attributes to icon-only buttons, specifically in the logs page, modals, and settings tabs. A learning note was also added to the documentation. Feedback suggests enhancing accessibility further in the OllamaTab by using contextual labels that include the instance name for the edit and delete actions, rather than generic labels.
| {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"> |
There was a problem hiding this comment.
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.
| <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"> |
There was a problem hiding this comment.
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.
| <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}`}> |
1 participant
💡 What: Added
aria-labelandtitleattributes to SVG icon-only buttons in several frontend Preact components.🎯 Why: Icon-only buttons without text content are inaccessible to screen readers and difficult to understand for users who don't recognize the icon. This change gives them a clear, readable name in French.
📸 Before/After: Visually unchanged, except for standard OS tooltips appearing when hovering over the buttons.
♿ Accessibility: Significant improvement for screen reader users and keyboard navigation context.
PR created automatically by Jules for task 6555928060549606757 started by @bobdivx