feat(nodes-edges): add nodesFocusable, edgesFocusable, cleanup keyboard controls

packages/core/src/container/EdgeRenderer/index.tsx

@@ -46,6 +46,7 @@ const selector = (s: ReactFlowState) => ({
   connectionNodeId: s.connectionNodeId,
   connectionHandleType: s.connectionHandleType,
   nodesConnectable: s.nodesConnectable,
+  edgesFocusable: s.edgesFocusable,
   elementsSelectable: s.elementsSelectable,
   width: s.width,
   height: s.height,
@@ -58,6 +59,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     connectionNodeId,
     connectionHandleType,
     nodesConnectable,
+    edgesFocusable,
     elementsSelectable,
     width,
     height,
@@ -119,6 +121,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle || null);
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
+              const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
 
               if (!sourceHandle || !targetHandle) {
                 devWarn(
@@ -181,7 +184,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                   onEdgeUpdateEnd={props.onEdgeUpdateEnd}
                   rfId={props.rfId}
                   ariaLabel={edge.ariaLabel}
-                  disableKeyboardA11y={props.disableKeyboardA11y}
+                  isFocusable={isFocusable}
                   pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
                   interactionWidth={edge.interactionWidth}
                 />

packages/core/src/container/NodeRenderer/index.tsx

@@ -31,12 +31,16 @@ type NodeRendererProps = Pick<
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
   nodesConnectable: s.nodesConnectable,
+  nodesFocusable: s.nodesFocusable,
   elementsSelectable: s.elementsSelectable,
   updateNodeDimensions: s.updateNodeDimensions,
 });
 
 const NodeRenderer = (props: NodeRendererProps) => {
-  const { nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(selector, shallow);
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions } = useStore(
+    selector,
+    shallow
+  );
   const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
   const resizeObserverRef = useRef<ResizeObserver>();
 
@@ -82,6 +86,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
         const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
         const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
         const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+        const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
+
         const clampedPosition = props.nodeExtent
           ? clampPosition(node.positionAbsolute, props.nodeExtent)
           : node.positionAbsolute;
@@ -122,6 +128,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isDraggable={isDraggable}
             isSelectable={isSelectable}
             isConnectable={isConnectable}
+            isFocusable={isFocusable}
             resizeObserver={resizeObserver}
             dragHandle={node.dragHandle}
             zIndex={node[internalsSymbol]?.z ?? 0}

packages/core/src/container/ReactFlow/index.tsx

@@ -108,7 +108,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       selectNodesOnDrag = true,
       nodesDraggable,
       nodesConnectable,
+      nodesFocusable,
       nodeOrigin = initNodeOrigin,
+      edgesFocusable,
       elementsSelectable,
       defaultViewport = initDefaultViewport,
       minZoom = 0.5,
@@ -245,6 +247,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onClickConnectEnd={onClickConnectEnd}
             nodesDraggable={nodesDraggable}
             nodesConnectable={nodesConnectable}
+            nodesFocusable={nodesFocusable}
+            edgesFocusable={edgesFocusable}
             elementsSelectable={elementsSelectable}
             minZoom={minZoom}
             maxZoom={maxZoom}