From e230f9791f5226b3cb3acfb05eb549f6c51c62d2 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Fri, 13 Feb 2026 13:28:02 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20improve=20accessibility=20=E2=80=94=20s?=
 =?UTF-8?q?emantic=20HTML=20landmarks,=20skip-to-content=20link,=20ARIA=20?=
 =?UTF-8?q?attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace div with <main> for primary chat pane (screen reader landmark)
- Replace div with <section> for split pane
- Add skip-to-content link for keyboard navigation (Tab → jump to chat input)
- Add aria-expanded and aria-label to tool call badge buttons
- Add id='chat-input' to textarea for skip link target
- Add i18n keys for new ARIA labels (EN + FR)
---
 src/App.tsx                  | 9 +++++----
 src/components/ChatInput.tsx | 1 +
 src/components/ToolCall.tsx  | 2 ++
 src/lib/i18n.ts              | 6 ++++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a64beab..94e24bf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -138,6 +138,7 @@ export default function App() {
   return (
     <ToolCollapseProvider>
     <div className="h-dvh flex overflow-x-hidden bg-[var(--pc-bg-base)] text-pc-text bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.02),transparent_50%),radial_gradient(ellipse_at_bottom_right,rgba(99,102,241,0.04),transparent_50%)]" role="application" aria-label="PinchChat">
+      <a href="#chat-input" className="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:top-2 focus:left-2 focus:px-4 focus:py-2 focus:rounded-xl focus:bg-pc-accent focus:text-white focus:text-sm focus:font-medium">{t('app.skipToChat')}</a>
       <Sidebar
         sessions={sessions}
         activeSession={activeSession}
@@ -150,13 +151,13 @@ export default function App() {
       />
       <div ref={splitContainerRef} className="flex-1 flex min-w-0" aria-hidden={sidebarOpen ? true : undefined}>
         {/* Primary pane */}
-        <div className="flex flex-col min-w-0" style={splitSession ? { width: `${splitRatio}%` } : { flex: 1 }}>
+        <main className="flex flex-col min-w-0" style={splitSession ? { width: `${splitRatio}%` } : { flex: 1 }} aria-label={t('app.mainChat')}>
           <Header status={status} sessionKey={activeSession} onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} activeSessionData={sessions.find(s => s.key === activeSession)} onLogout={logout} soundEnabled={soundEnabled} onToggleSound={toggleSound} messages={messages} agentAvatarUrl={agentIdentity?.avatar} />
           <ConnectionBanner status={status} />
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-pc-text-muted"><div className="animate-pulse text-sm">Loading…</div></div>}>
             <Chat messages={messages} isGenerating={isGenerating} isLoadingHistory={isLoadingHistory} status={status} sessionKey={activeSession} onSend={sendMessage} onAbort={abort} agentAvatarUrl={agentIdentity?.avatar} />
           </Suspense>
-        </div>
+        </main>
         {/* Split divider + secondary pane */}
         {splitSession && (
           <>
@@ -166,7 +167,7 @@ export default function App() {
               role="separator"
               aria-orientation="vertical"
             />
-            <div className="flex flex-col min-w-0" style={{ width: `${100 - splitRatio}%` }}>
+            <section className="flex flex-col min-w-0" style={{ width: `${100 - splitRatio}%` }} aria-label={t('app.splitPane')}>
               {/* Secondary header */}
               <div className="flex items-center gap-2 px-3 py-2 border-b border-pc-border bg-[var(--pc-bg-surface)]">
                 <span className="text-sm font-medium text-pc-text truncate flex-1">
@@ -184,7 +185,7 @@ export default function App() {
               <Suspense fallback={<div className="flex-1 flex items-center justify-center text-pc-text-muted"><div className="animate-pulse text-sm">Loading…</div></div>}>
                 <Chat messages={secondary.messages} isGenerating={secondary.isGenerating} isLoadingHistory={secondary.isLoadingHistory} status={status} sessionKey={splitSession} onSend={secondary.sendMessage} onAbort={secondary.abort} agentAvatarUrl={agentIdentity?.avatar} />
               </Suspense>
-            </div>
+            </section>
           </>
         )}
       </div>
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 74c31d8..1a10d79 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -304,6 +304,7 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey
             />
 
             <HighlightedTextarea
+              id="chat-input"
               ref={textareaRef}
               value={text}
               highlightEnabled={highlightEnabled}
diff --git a/src/components/ToolCall.tsx b/src/components/ToolCall.tsx
index 6ab2b89..71090c5 100644
--- a/src/components/ToolCall.tsx
+++ b/src/components/ToolCall.tsx
@@ -283,6 +283,8 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record
         onClick={() => setOpen(!open)}
         className={`inline-flex items-center gap-1.5 rounded-2xl border px-3 py-1.5 text-xs hover:brightness-125 transition-all max-w-full ${cs.glow}`}
         style={{ ...cs.badge, ...cs.text }}
+        aria-expanded={open}
+        aria-label={`${name}${hint ? ` — ${hint}` : ''}: ${open ? 'collapse' : 'expand'} details`}
       >
         <span className="text-[13px] leading-none">{getToolEmoji(name)}</span>
         <span className="font-mono font-semibold shrink-0">{name}</span>
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
index cb9ef37..65c474c 100644
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -63,6 +63,9 @@ const en = {
   'sidebar.close': 'Close sidebar',
   'sidebar.clearSearch': 'Clear search',
   'split.close': 'Close split view',
+  'app.mainChat': 'Main chat',
+  'app.splitPane': 'Split pane',
+  'app.skipToChat': 'Skip to chat input',
 
   // Thinking
   'thinking.label': 'Thinking',
@@ -180,6 +183,9 @@ const fr: Record<keyof typeof en, string> = {
   'sidebar.close': 'Fermer la barre latérale',
   'sidebar.clearSearch': 'Effacer la recherche',
   'split.close': 'Fermer la vue scindée',
+  'app.mainChat': 'Chat principal',
+  'app.splitPane': 'Volet scindé',
+  'app.skipToChat': 'Aller au champ de saisie',
 
   'thinking.label': 'Réflexion',
   'thinking.reasoning': 'Réflexion…',