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

Added `aria-label`s to the "clear filter" button in `AppLogsPage.tsx` and the modal close button in `GithubImportModal.tsx` to improve accessibility for screen readers.

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 +-
 3 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..f260cd5b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-10 - Missing ARIA labels on Icon-only utility buttons
+**Learning:** Common utility buttons like modal close elements ("✕", SVGs) and input clearing buttons consistently lack `aria-label` properties, degrading the screen-reader experience.
+**Action:** When adding or refactoring utility interactions, proactively evaluate and append `aria-label` (e.g., `aria-label="Fermer"`, `aria-label="Effacer le filtre"`) to icon-only buttons to conform to accessibility standards.
diff --git a/src/components/apps/AppLogsPage.tsx b/src/components/apps/AppLogsPage.tsx
index 7efdb4d9..9d55f856 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">✕</button>
             </>
           )}
         </div>
diff --git a/src/components/apps/GithubImportModal.tsx b/src/components/apps/GithubImportModal.tsx
index c962b701..3abe7bc4 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">
                 <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>