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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user