jprdonnelly/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-18 22:00:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(inspect): add aria-hidden to decorative icon and use stable keys for path breadcrumb

Browse Source 
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.
This commit is contained in:
yyh
2026-01-29 14:20:12 +08:00
parent 3ad05be9ca
commit d73a36d6bc
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/app/components/workflow/variable-inspect/artifacts-tab.tsx
View File

@@ -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>
))}