From fc69bbaada440e96ec31f58e65ca270822e1b98f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 15 May 2026 18:19:07 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/palette.md                         | 3 +++
 src/components/apps/AppLogsPage.tsx       | 2 +-
 src/components/apps/GithubImportModal.tsx | 2 +-
 src/components/costs/CostsDashboard.tsx   | 2 +-
 src/components/settings/OllamaTab.tsx     | 4 ++--
 5 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..1922e2eb
--- /dev/null
+++ b/.Jules/palette.md
@@ -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.
diff --git a/src/components/apps/AppLogsPage.tsx b/src/components/apps/AppLogsPage.tsx
index 7efdb4d9..ef786574 100644
--- a/src/components/apps/AppLogsPage.tsx
+++ b/src/components/apps/AppLogsPage.tsx
@@ -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>
diff --git a/src/components/apps/GithubImportModal.tsx b/src/components/apps/GithubImportModal.tsx
index c962b701..b1a2c89a 100644
--- a/src/components/apps/GithubImportModal.tsx
+++ b/src/components/apps/GithubImportModal.tsx
@@ -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>
diff --git a/src/components/costs/CostsDashboard.tsx b/src/components/costs/CostsDashboard.tsx
index 0526fb60..12d4097b 100644
--- a/src/components/costs/CostsDashboard.tsx
+++ b/src/components/costs/CostsDashboard.tsx
@@ -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">
diff --git a/src/components/settings/OllamaTab.tsx b/src/components/settings/OllamaTab.tsx
index a628a314..7ba18fad 100644
--- a/src/components/settings/OllamaTab.tsx
+++ b/src/components/settings/OllamaTab.tsx
@@ -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">
                         <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">
                         <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>