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}
                 />