From d73a36d6bc2aff3768e27d87accecf90bf380ffd Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 29 Jan 2026 14:20:12 +0800
Subject: [PATCH] fix(inspect): add aria-hidden to decorative icon and use
 stable keys for path breadcrumb
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mark the empty state SearchLinesSparkle icon as aria-hidden for screen
readers. Replace array-index keys with cumulative path keys (O(n) vs
O(n²)) to satisfy react/no-array-index-key and improve key stability.
---
 .../variable-inspect/artifacts-tab.tsx         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
index 4025d32c0b..afdd2688ef 100644
--- a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
+++ b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
@@ -72,7 +72,7 @@ const ArtifactsTab: FC<InspectHeaderProps> = (headerProps) => {
         <div className="h-full p-2">
           <div className="flex h-full flex-col gap-3 rounded-xl bg-background-section p-8">
             <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-sm">
-              <SearchLinesSparkle className="h-5 w-5 text-text-accent" />
+              <SearchLinesSparkle className="h-5 w-5 text-text-accent" aria-hidden="true" />
             </div>
             <div className="flex flex-col gap-1">
               <div className="system-sm-semibold text-text-secondary">{t('debug.variableInspect.tabArtifacts.emptyTitle')}</div>
@@ -93,6 +93,12 @@ const ArtifactsTab: FC<InspectHeaderProps> = (headerProps) => {
   }
 
   const file = selectedFile
+  const parts = file?.path.split('/') ?? []
+  let cumPath = ''
+  const pathSegments = parts.map((part, i) => {
+    cumPath += (cumPath ? '/' : '') + part
+    return { part, key: cumPath, isFirst: i === 0, isLast: i === parts.length - 1 }
+  })
 
   return (
     <SplitPanel
@@ -122,16 +128,16 @@ const ArtifactsTab: FC<InspectHeaderProps> = (headerProps) => {
                 <>
                   <div className="flex w-0 grow items-center gap-1">
                     <div className="flex items-center gap-1 truncate">
-                      {file.path.split('/').map((part, i, arr) => (
-                        <span key={i} className="flex items-center gap-1">
-                          {i > 0 && <span className="system-sm-regular text-text-quaternary">/</span>}
+                      {pathSegments!.map(seg => (
+                        <span key={seg.key} className="flex items-center gap-1">
+                          {!seg.isFirst && <span className="system-sm-regular text-text-quaternary">/</span>}
                           <span
                             className={cn(
                               'system-sm-semibold truncate',
-                              i === arr.length - 1 ? 'text-text-secondary' : 'text-text-tertiary',
+                              seg.isLast ? 'text-text-secondary' : 'text-text-tertiary',
                             )}
                           >
-                            {part}
+                            {seg.part}
                           </span>
                         </span>
                       ))}