From 765b548be4a4e5ebca4be96f467f52db63dd92dc Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Mon, 26 Jan 2026 16:01:22 +0800
Subject: [PATCH] fix(a11y): improve accessibility for artifacts tree

Add aria-label, aria-expanded attributes and focus-visible styles
for folder buttons. Hide loading skeleton from assistive tech.
---
 .../components/workflow/skill/file-tree/artifacts-section.tsx | 2 +-
 .../components/workflow/skill/file-tree/artifacts-tree.tsx    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
index 6fc2448e0d..b74b086f0b 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
@@ -81,7 +81,7 @@ const ArtifactsSection: FC<ArtifactsSectionProps> = ({ className }) => {
         <div className="flex flex-col gap-px">
           {isLoading
             ? (
-                <div className="px-2.5 py-3">
+                <div className="px-2.5 py-3" aria-hidden="true">
                   <div className="h-4 w-full animate-pulse rounded bg-components-panel-bg" />
                 </div>
               )
diff --git a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx b/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
index 8fb03b0efe..79491ea4f4 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
@@ -45,6 +45,8 @@ const ArtifactsTreeNode: FC<ArtifactsTreeNodeProps> = ({
       <div
         role={isFolder ? 'button' : undefined}
         tabIndex={isFolder ? 0 : undefined}
+        aria-label={isFolder ? `${node.name} folder` : undefined}
+        aria-expanded={isFolder ? isExpanded : undefined}
         onClick={handleToggle}
         onKeyDown={isFolder
           ? (e) => {
@@ -54,7 +56,7 @@ const ArtifactsTreeNode: FC<ArtifactsTreeNodeProps> = ({
           : undefined}
         className={cn(
           'group flex items-center gap-0 rounded-md py-0.5 pr-1.5',
-          isFolder && 'cursor-pointer hover:bg-state-base-hover',
+          isFolder && 'cursor-pointer hover:bg-state-base-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-components-input-border-active',
           !isFolder && 'hover:bg-state-base-hover',
         )}
         style={{ paddingLeft: `${8 + depth * 20}px` }}