From 20832fccb85b0cbe21ca2385bec109d2a6a82703 Mon Sep 17 00:00:00 2001
From: Haileyesus <something@gmail.com>
Date: Wed, 4 Mar 2026 20:43:57 +0300
Subject: [PATCH] style: enhance accessibility for loading indicators in
 ClaudeStatus component

---
 .../chat/view/subcomponents/ClaudeStatus.tsx          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/view/subcomponents/ClaudeStatus.tsx b/src/components/chat/view/subcomponents/ClaudeStatus.tsx
index 9e297e6a..1d8e103d 100644
--- a/src/components/chat/view/subcomponents/ClaudeStatus.tsx
+++ b/src/components/chat/view/subcomponents/ClaudeStatus.tsx
@@ -150,11 +150,18 @@ export default function ClaudeStatus({
 
                 <p className="truncate text-sm font-semibold text-foreground sm:text-[15px]">
                   {cleanStatusText}
-                  {isLoading && <span className="text-primary">{animatedDots}</span>}
+                  {isLoading && (
+                    <span aria-hidden="true" className="text-primary">
+                      {animatedDots}
+                    </span>
+                  )}
                 </p>
 
                 <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground sm:text-xs">
-                  <span className="inline-flex items-center -ml-2 rounded-full border border-border/70 bg-background/60 px-2 py-0.5">
+                  <span
+                    aria-hidden="true"
+                    className="inline-flex items-center -ml-2 rounded-full border border-border/70 bg-background/60 px-2 py-0.5"
+                  >
                     {elapsedLabel}
                   </span>
                 </div>