feat: improve accessibility — semantic HTML landmarks, skip-to-content link, ARIA attributes

- 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)
This commit is contained in:
Nicolas Varrot
2026-02-13 13:28:02 +00:00
parent 60411971b7
commit e230f9791f
4 changed files with 14 additions and 4 deletions

View File

@@ -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>