opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-13 08:57:28 +08: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
No known key found for this signature in database
1 changed files with 12 additions and 6 deletions
Show Stats 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="h-full p-2">
<div className="flex h-full flex-col gap-3 rounded-xl bg-background-section p-8"> <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"> <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>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="system-sm-semibold text-text-secondary">{t('debug.variableInspect.tabArtifacts.emptyTitle')}</div> <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 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 ( return (
<SplitPanel <SplitPanel
@ -122,16 +128,16 @@ const ArtifactsTab: FC<InspectHeaderProps> = (headerProps) => {
<> <>
<div className="flex w-0 grow items-center gap-1"> <div className="flex w-0 grow items-center gap-1">
<div className="flex items-center gap-1 truncate"> <div className="flex items-center gap-1 truncate">
{file.path.split('/').map((part, i, arr) => ( {pathSegments!.map(seg => (
<span key={i} className="flex items-center gap-1"> <span key={seg.key} className="flex items-center gap-1">
{i > 0 && <span className="system-sm-regular text-text-quaternary">/</span>} {!seg.isFirst && <span className="system-sm-regular text-text-quaternary">/</span>}
<span <span
className={cn( className={cn(
'system-sm-semibold truncate', '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>
</span> </span>
))} ))}