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:
@@ -10,6 +10,8 @@ export function ThinkingBlock({ text }: { text: string }) {
|
||||
<div className="my-2">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
aria-expanded={open}
|
||||
aria-label={t('thinking.label')}
|
||||
className="inline-flex items-center gap-1.5 rounded-2xl border border-pc-border bg-pc-elevated/35 px-3 py-1.5 text-xs text-violet-300 hover:bg-[var(--pc-hover)] transition-colors"
|
||||
>
|
||||
<Brain size={13} />
|
||||
@@ -17,7 +19,7 @@ export function ThinkingBlock({ text }: { text: string }) {
|
||||
{open ? <ChevronDown size={12} className="ml-1 text-pc-text-muted" /> : <ChevronRight size={12} className="ml-1 text-pc-text-muted" />}
|
||||
</button>
|
||||
{open && (
|
||||
<div className="mt-2 rounded-2xl border border-pc-border bg-pc-elevated/25 p-3 text-sm italic text-pc-text-secondary whitespace-pre-wrap max-h-96 overflow-y-auto">
|
||||
<div role="region" aria-label={t('thinking.label')} className="mt-2 rounded-2xl border border-pc-border bg-pc-elevated/25 p-3 text-sm italic text-pc-text-secondary whitespace-pre-wrap max-h-96 overflow-y-auto">
|
||||
{text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user