fix: improve accessibility — add ARIA attributes to ThemeSwitcher, ThinkingBlock, ThinkingIndicator, ErrorBoundary, SessionIcon

- ThemeSwitcher: aria-expanded, aria-haspopup, aria-pressed on theme/accent buttons, Escape to close, dialog role
- ThinkingBlock: aria-expanded on toggle, region role on content
- ThinkingIndicator: role=status, aria-label, decorative icon aria-hidden
- ErrorBoundary: role=alert on error state
- SessionIcon: aria-hidden on decorative SVG brand icons
This commit is contained in:
Nicolas Varrot
2026-02-13 10:42:10 +00:00
parent 3657476fd9
commit 1c09ccde22
5 changed files with 24 additions and 10 deletions

View File

@@ -27,13 +27,13 @@ export function ThinkingIndicator() {
};
return (
<div className="flex items-center gap-2 mt-2 animate-fade-in">
<div role="status" aria-label={t('thinking.reasoning')} className="flex items-center gap-2 mt-2 animate-fade-in">
<div className="inline-flex items-center gap-2 rounded-2xl border border-violet-500/15 bg-violet-500/5 px-3 py-1.5">
<Brain size={14} className="text-violet-300 animate-pulse" />
<Brain size={14} className="text-violet-300 animate-pulse" aria-hidden="true" />
<span className="text-xs font-medium text-violet-300">
{t('thinking.reasoning')}
</span>
<span className="text-xs tabular-nums text-violet-300/50">
<span className="text-xs tabular-nums text-violet-300/50" aria-live="off">
{formatElapsed(elapsed)}
</span>
</div>