diff --git a/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx b/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx index 25150e2d04..934dcc490f 100644 --- a/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx +++ b/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx @@ -54,6 +54,8 @@ vi.mock('@langgenius/dify-ui/popover', () => ({ }, PopoverTrigger: ({ render }: { render: ReactNode }) => <>{render}, PopoverContent: ({ children }: { children: ReactNode }) =>
{children}
, + PopoverTitle: ({ children, className }: { children: ReactNode, className?: string }) =>

{children}

, + PopoverDescription: ({ children, className }: { children: ReactNode, className?: string }) =>

{children}

, PopoverClose: ({ children, className }: { children: ReactNode, className?: string }) => , })) diff --git a/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx b/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx index d574dda0ac..a84ddd06af 100644 --- a/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx +++ b/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx @@ -36,6 +36,7 @@ describe('ChecklistNodeGroup', () => { expect(screen.getByText('Needs configuration')).toBeInTheDocument() expect(screen.getByText(/needConnectTip/i)).toBeInTheDocument() expect(screen.getAllByText(/goToFix/i)).toHaveLength(2) + expect(screen.getByRole('button', { name: /Needs configuration/i })).toHaveAttribute('title', 'Needs configuration') fireEvent.click(screen.getByText('Needs configuration')) @@ -57,5 +58,7 @@ describe('ChecklistNodeGroup', () => { expect(onItemClick).not.toHaveBeenCalled() expect(screen.queryByText(/goToFix/i)).not.toBeInTheDocument() + expect(screen.queryByRole('button', { name: /Needs configuration/i })).not.toBeInTheDocument() + expect(screen.getByText('Needs configuration').parentElement).toHaveAttribute('title', 'Needs configuration') }) }) diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx index 9a54175c8c..1e4303d401 100644 --- a/web/app/components/workflow/header/checklist/index.tsx +++ b/web/app/components/workflow/header/checklist/index.tsx @@ -7,6 +7,8 @@ import { Popover, PopoverClose, PopoverContent, + PopoverDescription, + PopoverTitle, PopoverTrigger, } from '@langgenius/dify-ui/popover' import { @@ -43,6 +45,7 @@ const WorkflowChecklist = ({ const nodes = useNodes() const needWarningNodes = useChecklist(nodes, edges) const { handleNodeSelect } = useNodesInteractions() + const checklistLabel = t('panel.checklist', { ns: 'workflow' }) const { pluginItems, nodeItems } = useMemo(() => { const plugins: ChecklistItem[] = [] @@ -75,12 +78,14 @@ const WorkflowChecklist = ({ disabled && 'cursor-not-allowed opacity-50', )} disabled={disabled || undefined} + aria-label={checklistLabel} > {!!needWarningNodes.length && ( @@ -104,19 +109,22 @@ const WorkflowChecklist = ({
-

- {t('panel.checklist', { ns: 'workflow' })} + + {checklistLabel} {needWarningNodes.length > 0 && `(${needWarningNodes.length})`} -

+
- - + +
{needWarningNodes.length > 0 && ( -

+ {t('panel.checklistDescription', { ns: 'workflow' })} -

+ )}
diff --git a/web/app/components/workflow/header/checklist/node-group.tsx b/web/app/components/workflow/header/checklist/node-group.tsx index a161c6cb87..05987b632e 100644 --- a/web/app/components/workflow/header/checklist/node-group.tsx +++ b/web/app/components/workflow/header/checklist/node-group.tsx @@ -45,29 +45,48 @@ export const ChecklistNodeGroup = memo(({
- {subItems.map(sub => ( -
goToEnabled && onItemClick(item)} - > - - - {sub.message} - - {goToEnabled && ( -
- - {t('panel.goToFix', { ns: 'workflow' })} - - -
- )} -
- ))} + {subItems.map((sub) => { + const content = ( + <> + + + {sub.message} + + {goToEnabled && ( +
+ + {t('panel.goToFix', { ns: 'workflow' })} + +
+ )} + + ) + const className = cn( + 'group/item flex w-full items-center gap-2 rounded-lg px-1 text-left', + goToEnabled && 'cursor-pointer hover:bg-state-base-hover', + ) + + if (goToEnabled) { + return ( + + ) + } + + return ( +
+ {content} +
+ ) + })}
)