From f576ea5e591c9e3fc5215fed7e8dae26229dc8c9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 8 May 2026 17:53:00 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20TabBar=20and=20SaveRow=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added `role="tablist"`, `role="tab"`, and `aria-selected` to `TabBar.tsx`.
- Wrapped dynamic messages in `SaveRow.tsx` with `aria-live="polite"` and `role="status"`.
- Added `aria-busy` to the save button in `SaveRow.tsx`.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 .Jules/palette.md             |  3 +++
 src/components/ui/SaveRow.tsx | 13 ++++++++-----
 src/components/ui/TabBar.tsx  |  4 +++-
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..92bd39f0
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-08 - TabBar and SaveRow Accessibility
+**Learning:** Dynamic status messages in UI components (like success/error text in save bars) should be wrapped in an `aria-live="polite"` region with `role="status"` to ensure screen readers announce updates dynamically. Tab bars need explicit `role="tablist"` and `role="tab"` with `aria-selected` tracking the active state.
+**Action:** When implementing custom interactive components like tabs or dynamic save notifications, always verify standard ARIA roles and live regions are included.
diff --git a/src/components/ui/SaveRow.tsx b/src/components/ui/SaveRow.tsx
index 177e3e9a..5c1c73eb 100644
--- a/src/components/ui/SaveRow.tsx
+++ b/src/components/ui/SaveRow.tsx
@@ -18,17 +18,20 @@ export default function SaveRow({
   const isError = message?.toLowerCase().includes('erreur');
   return (
     <div class="pt-4 flex items-center justify-between gap-4 border-t border-gray-200 flex-wrap">
-      {message ? (
-        <span class={`text-sm font-medium ${isError ? 'text-red-500' : 'text-green-600'}`}>{message}</span>
-      ) : (
-        <span />
-      )}
+      <div aria-live="polite" role="status">
+        {message ? (
+          <span class={`text-sm font-medium ${isError ? 'text-red-500' : 'text-green-600'}`}>{message}</span>
+        ) : (
+          <span />
+        )}
+      </div>
       <div class="flex gap-2">
         {extraActions}
         <button
           type="button"
           onClick={onSave}
           disabled={saving}
+          aria-busy={saving}
           class="px-5 py-2 rounded-full text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
           style="background:#175B37"
         >
diff --git a/src/components/ui/TabBar.tsx b/src/components/ui/TabBar.tsx
index e96575ef..14618f3f 100644
--- a/src/components/ui/TabBar.tsx
+++ b/src/components/ui/TabBar.tsx
@@ -16,7 +16,7 @@ export default function TabBar({ tabs, active, onChange, className = '', tone =
     : 'flex flex-wrap gap-1 p-1 bg-gray-100 rounded-xl w-fit';
 
   return (
-    <div class={`${rail} ${className}`}>
+    <div role="tablist" class={`${rail} ${className}`}>
       {tabs.map((tab) => {
         const selected = active === tab.id;
         const base =
@@ -32,6 +32,8 @@ export default function TabBar({ tabs, active, onChange, className = '', tone =
         return (
           <button
             key={tab.id}
+            role="tab"
+            aria-selected={selected}
             type="button"
             onClick={() => onChange(tab.id)}
             class={`${base} ${sizing} ${selected ? activeCls : idleCls}`}