react-flow-best-practices

예상 결과:

• **Findings**
• - High: Canvas.tsx:42 - nodeTypes object created inline inside render function. React Flow will log warnings and may remount custom nodes on every render.
• - High: WorkflowNode.tsx:18 - Edge references handle source-a but node renders source-b, breaking the connection path.
• - Medium: Canvas.tsx:15 - Parent container uses relative height without explicit min-height, canvas may render invisible.
•  
• **Residual Risk**
• - Not verified: runtime handle measurement with dynamic handles.
• - Not verified: actual keyboard navigation behavior in browser.

예상 결과:

• Found the issue: your custom node buttons lack the nodrag CSS class.
•  
• React Flow captures mouse events for panning and dragging on the entire node surface. Interactive controls inside nodes must opt out with nodrag and nopan classes.
•  
• Fix: Add className=nodrag to your button elements. For scrollable areas inside nodes, also add nowheel.
•  
• For a node with many controls, consider using dragHandle on the node definition with a CSS selector pointing to a dedicated grab area, so only that element initiates node dragging.

예상 결과:

• Your canvas has several accessibility gaps:
•  
• 1. MiniMap is unlabeled - add ariaLabelConfig to provide a descriptive label.
• 2. Custom controls in WorkflowNode.vue use icon-only buttons without accessible names.
• 3. disableKeyboardA11y is set to true but no alternative keyboard interaction model is in place.
• 4. Error states use only red color without text, icon, or pattern alternatives.
•  
• Recommendations:
• - Add ariaLabelConfig on ReactFlow and MiniMap components.
• - Give icon buttons aria-label or visible text labels.
• - Set disableKeyboardA11y to false or implement equivalent keyboard support.
• - Use icons and text alongside color for semantic states.