fix: localize UI to English and add ARIA accessibility attributes

- Replace all French UI strings with English (Connected, Thinking, Result, Send, etc.)
- Add role="log" + aria-live="polite" to chat message area
- Add role="form" + aria-label to message input area
- Add aria-label to sidebar toggle, attach file, send, and textarea
- Add role="banner" to header, role="navigation" to sidebar
- Add role="application" to app root
This commit is contained in:
Nicolas Varrot
2026-02-11 12:17:54 +00:00
parent 24c7d00c23
commit 3370916931
7 changed files with 20 additions and 15 deletions

View File

@@ -179,6 +179,8 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled }: Props) {
return (
<div
className="border-t border-white/8 bg-[#1a1a20]/60 backdrop-blur-xl p-4"
role="form"
aria-label="Message input"
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
@@ -216,7 +218,8 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled }: Props) {
onClick={() => fileInputRef.current?.click()}
disabled={disabled}
className="shrink-0 h-11 w-11 rounded-2xl border border-white/8 bg-zinc-800/30 flex items-center justify-center text-zinc-400 hover:text-cyan-300 hover:bg-white/5 transition-colors disabled:opacity-30"
title="Joindre un fichier"
title="Attach file"
aria-label="Attach file"
>
<Paperclip size={18} />
</button>
@@ -235,7 +238,8 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled }: Props) {
onChange={(e) => setText(e.target.value)}
onKeyDown={handleKeyDown}
onPaste={handlePaste}
placeholder="Écris un message…"
placeholder="Type a message…"
aria-label="Message"
disabled={disabled}
rows={1}
className="flex-1 bg-transparent resize-none rounded-2xl border border-white/8 bg-zinc-900/35 px-4 py-3 text-sm text-zinc-300 placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-cyan-400/30 transition-all max-h-[200px]"
@@ -252,10 +256,11 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled }: Props) {
<button
onClick={handleSubmit}
disabled={(!text.trim() && files.length === 0) || disabled}
aria-label="Send message"
className="shrink-0 h-11 px-5 rounded-2xl bg-gradient-to-r from-cyan-500/80 via-indigo-500/70 to-violet-500/80 text-zinc-900 font-semibold text-sm hover:opacity-90 shadow-[0_8px_24px_rgba(34,211,238,0.1)] disabled:opacity-30 disabled:shadow-none transition-all flex items-center gap-2"
>
<Send size={16} />
<span className="hidden sm:inline">Envoyer</span>
<span className="hidden sm:inline">Send</span>
</button>
)}
</div>