From 45a76fa90bc95e6213a7dc42805969d5ab8a3cb9 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 21 Jan 2026 15:13:50 +0800
Subject: [PATCH] fix: improve accessibility for file-tree components

- Convert clickable div to semantic button in artifacts-section
- Add aria-hidden to decorative icons
- Add aria-label to rename inputs and hidden file inputs
- Add i18n keys for artifacts section and rename labels
- Support ignore file extensions (.gitignore, etc.)
---
 .../skill/file-tree/artifacts-section.tsx     | 20 ++++++++++++++-----
 .../workflow/skill/file-tree/index.tsx        |  4 ++--
 .../workflow/skill/file-tree/node-menu.tsx    |  2 ++
 .../skill/file-tree/tree-edit-input.tsx       |  5 +++++
 web/i18n/en-US/workflow.json                  |  4 ++++
 web/i18n/zh-Hans/workflow.json                |  6 +++++-
 6 files changed, 33 insertions(+), 8 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 90c4d427fd..faf4c2f692 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
@@ -3,6 +3,7 @@
 import type { FC } from 'react'
 import { RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import FolderSpark from '@/app/components/base/icons/src/vender/workflow/FolderSpark'
 import { cn } from '@/utils/classnames'
 
@@ -17,22 +18,31 @@ type ArtifactsSectionProps = {
  * Placeholder implementation - functionality to be added later.
  */
 const ArtifactsSection: FC<ArtifactsSectionProps> = ({ className }) => {
+  const { t } = useTranslation('workflow')
   // TODO: Replace with actual data
   const badgeText = 'Test Run#3'
   const hasNewFiles = true
 
   return (
     <div className={cn('shrink-0 border-t border-divider-regular p-1', className)}>
-      <div className="flex cursor-pointer items-center rounded-md py-1 pl-2 pr-1.5 hover:bg-state-base-hover">
+      <button
+        type="button"
+        className={cn(
+          'flex w-full items-center rounded-md py-1 pl-2 pr-1.5',
+          'hover:bg-state-base-hover',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
+        )}
+        aria-label={t('skillSidebar.artifacts.openArtifacts')}
+      >
         {/* Title section */}
         <div className="flex flex-1 items-center gap-1 py-0.5">
           {/* Icon */}
           <div className="flex size-5 items-center justify-center">
-            <FolderSpark className="size-4 text-text-secondary" />
+            <FolderSpark className="size-4 text-text-secondary" aria-hidden="true" />
           </div>
           {/* Label */}
           <span className="system-sm-semibold uppercase text-text-secondary">
-            Artifacts
+            {t('skillSidebar.artifacts.title')}
           </span>
           {/* Badge */}
           <div className="flex min-w-4 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5">
@@ -44,13 +54,13 @@ const ArtifactsSection: FC<ArtifactsSectionProps> = ({ className }) => {
 
         {/* Arrow with indicator */}
         <div className="relative">
-          <RiArrowRightSLine className="size-4 text-text-tertiary" />
+          <RiArrowRightSLine className="size-4 text-text-tertiary" aria-hidden="true" />
           {/* Blue dot indicator */}
           {hasNewFiles && (
             <div className="absolute -right-0.5 top-1/2 size-[7px] -translate-y-1/2 rounded-full border border-white bg-state-accent-solid" />
           )}
         </div>
-      </div>
+      </button>
     </div>
   )
 }
diff --git a/web/app/components/workflow/skill/file-tree/index.tsx b/web/app/components/workflow/skill/file-tree/index.tsx
index bae0ecdf18..e719251523 100644
--- a/web/app/components/workflow/skill/file-tree/index.tsx
+++ b/web/app/components/workflow/skill/file-tree/index.tsx
@@ -40,7 +40,7 @@ const DropTip = () => {
   const { t } = useTranslation('workflow')
   return (
     <div className="flex shrink-0 items-center justify-center gap-2 py-4 text-text-quaternary">
-      <RiDragDropLine className="size-4" />
+      <RiDragDropLine className="size-4" aria-hidden="true" />
       <span className="system-xs-regular">
         {t('skillSidebar.dropTip')}
       </span>
@@ -255,7 +255,7 @@ const FileTree: React.FC<FileTreeProps> = ({ className }) => {
       <>
         <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
           <div className="flex flex-1 flex-col items-center justify-center gap-2 pb-20">
-            <SearchMenu className="size-8 text-text-tertiary" />
+            <SearchMenu className="size-8 text-text-tertiary" aria-hidden="true" />
             <span className="system-xs-regular text-text-secondary">
               {t('skillSidebar.searchNoResults')}
             </span>
diff --git a/web/app/components/workflow/skill/file-tree/node-menu.tsx b/web/app/components/workflow/skill/file-tree/node-menu.tsx
index ba9cb802d1..88843a4362 100644
--- a/web/app/components/workflow/skill/file-tree/node-menu.tsx
+++ b/web/app/components/workflow/skill/file-tree/node-menu.tsx
@@ -116,6 +116,7 @@ const NodeMenu: FC<NodeMenuProps> = ({
             type="file"
             multiple
             className="hidden"
+            aria-label={t('skillSidebar.menu.uploadFile')}
             onChange={handleFileChange}
           />
           {!isRoot && (
@@ -125,6 +126,7 @@ const NodeMenu: FC<NodeMenuProps> = ({
               // @ts-expect-error webkitdirectory is a non-standard attribute
               webkitdirectory=""
               className="hidden"
+              aria-label={t('skillSidebar.menu.uploadFolder')}
               onChange={handleFolderChange}
             />
           )}
diff --git a/web/app/components/workflow/skill/file-tree/tree-edit-input.tsx b/web/app/components/workflow/skill/file-tree/tree-edit-input.tsx
index 440d5705fd..8c6a5b28af 100644
--- a/web/app/components/workflow/skill/file-tree/tree-edit-input.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree-edit-input.tsx
@@ -38,12 +38,17 @@ const TreeEditInput: React.FC<TreeEditInputProps> = ({ node }) => {
     node.reset()
   }
 
+  const ariaLabel = isFolder
+    ? t('skillSidebar.renameFolderInput')
+    : t('skillSidebar.renameFileInput')
+
   return (
     <input
       ref={inputRef}
       type="text"
       defaultValue={node.data.name}
       placeholder={placeholder}
+      aria-label={ariaLabel}
       onKeyDown={handleKeyDown}
       onBlur={handleBlur}
       onClick={e => e.stopPropagation()}
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 99df412322..37950ccce7 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -1033,6 +1033,8 @@
   "skillEditor.unsupportedPreview": "This file type is not supported for preview",
   "skillSidebar.addFile": "Upload File",
   "skillSidebar.addFolder": "New Folder",
+  "skillSidebar.artifacts.openArtifacts": "Open artifacts",
+  "skillSidebar.artifacts.title": "Artifacts",
   "skillSidebar.dragAction.moveTo": "Move to ",
   "skillSidebar.dragAction.uploadTo": "Upload to ",
   "skillSidebar.dropTip": "Drop files here to upload",
@@ -1078,6 +1080,8 @@
   "skillSidebar.menu.uploadFile": "Upload File",
   "skillSidebar.menu.uploadFolder": "Upload Folder",
   "skillSidebar.newFolder": "New folder",
+  "skillSidebar.renameFileInput": "Rename file",
+  "skillSidebar.renameFolderInput": "Rename folder",
   "skillSidebar.resetFilter": "Reset filter",
   "skillSidebar.rootFolder": "root folder",
   "skillSidebar.searchNoResults": "No file were found",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index aef9a33e03..261c037a20 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -1007,6 +1007,8 @@
   "skillEditor.unsupportedPreview": "该文件类型不支持预览",
   "skillSidebar.addFile": "上传文件",
   "skillSidebar.addFolder": "新建文件夹",
+  "skillSidebar.artifacts.openArtifacts": "打开产物文件夹",
+  "skillSidebar.artifacts.title": "产物",
   "skillSidebar.dragAction.moveTo": "移动到 ",
   "skillSidebar.dragAction.uploadTo": "上传到 ",
   "skillSidebar.dropTip": "拖放文件到此处上传",
@@ -1051,6 +1053,8 @@
   "skillSidebar.menu.uploadFile": "上传文件",
   "skillSidebar.menu.uploadFolder": "上传文件夹",
   "skillSidebar.newFolder": "新建文件夹",
+  "skillSidebar.renameFileInput": "重命名文件",
+  "skillSidebar.renameFolderInput": "重命名文件夹",
   "skillSidebar.resetFilter": "重置筛选",
   "skillSidebar.rootFolder": "根目录",
   "skillSidebar.searchNoResults": "未找到文件",
@@ -1058,7 +1062,7 @@
   "skillSidebar.unsavedChanges.confirmClose": "放弃",
   "skillSidebar.unsavedChanges.content": "您有未保存的更改，是否放弃？",
   "skillSidebar.unsavedChanges.title": "未保存的更改",
-  "skillSidebar.uploading": "上传中...",
+  "skillSidebar.uploading": "上传中…",
   "subGraphModal.canvasPlaceholder": "点击配置内部结构",
   "subGraphModal.defaultValueHint": "返回以下值",
   "subGraphModal.internalStructure": "内部结构",