shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): add role=status and aria-hidden to TypingIndicator

Browse Source 
- Add role="status" with aria-label for screen reader announcement
- Mark decorative bounce dots as aria-hidden
This commit is contained in:
Nicolas Varrot
2026-03-06 09:03:40 +00:00
parent 8540902a8a
commit 6e9f0e39cc
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/TypingIndicator.tsx
View File

@@ -23,12 +23,12 @@ export function TypingIndicator() {
}, []);
return (
<div className="animate-fade-in flex items-start gap-3 px-4 py-3">
<div role="status" aria-label={t('chat.thinking')} className="animate-fade-in flex items-start gap-3 px-4 py-3">
<div className="shrink-0 flex h-9 w-9 items-center justify-center rounded-2xl border border-pc-border-strong bg-pc-input/60">
<Bot className="h-4 w-4 text-pc-accent-light" />
</div>
<div className="rounded-3xl border border-pc-border-strong bg-pc-input/55 px-4 py-3 shadow-[0_0_0_1px_rgba(255,255,255,0.03)]">
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5" aria-hidden="true">
<span className="bounce-dot h-2 w-2 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80" />
<span className="bounce-dot h-2 w-2 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80" />
<span className="bounce-dot h-2 w-2 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80" />