Feat: basic keyboard controls and better WAI-ARIA defaults (#2333)

* feat(nodes): focusable and moveable with keys
* refactor(key-handling): cleanup, handle selections
* feat(edges): selectable with keys
* refactor(nodes-edges): cleanup keyboard controls and aria- attrs
* refactor(nodes): node needs to be selected for arrow keys
* refactor(minimap): create const for labelledby

closes #1033

examples/nextjs/pages/CustomNode/index.tsx

@@ -29,6 +29,7 @@ const initBgColor = '#1A192B';
 
 const connectionLineStyle = { stroke: '#fff' };
 const snapGrid: SnapGrid = [16, 16];
+const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
 
 const nodeTypes = {
   selectorNode: ColorSelectorNode,
@@ -141,7 +142,7 @@ const CustomNodeFlow = () => {
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
-      defaultZoom={1.5}
+      defaultViewport={defaultViewport}
       fitView
     >
       <MiniMap

examples/nextjs/pages/Edges/index.tsx

@@ -192,7 +192,7 @@ const EdgesFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = useCallback(
     (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    []
+    [setEdges]
   );
 
   return (

examples/nextjs/pages/NestedNodes/index.tsx

@@ -158,8 +158,7 @@ const NestedFlow = () => {
       onEdgeClick={onEdgeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      className='react-flow-basic-example'
-      defaultZoom={1.5}
+      className="react-flow-basic-example"
       minZoom={0.2}
       maxZoom={4}
       onlyRenderVisibleElements={false}

examples/nextjs/pages/Subflow/index.tsx

@@ -24,6 +24,8 @@ const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) =>
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
+const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
+
 const initialNodes: Node[] = [
   {
     id: '1',
@@ -206,8 +208,8 @@ const Subflow = () => {
       onConnect={onConnect}
       onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
-      className='react-flow-basic-example'
-      defaultZoom={1.5}
+      className="react-flow-basic-example"
+      defaultViewport={defaultViewport}
       minZoom={0.2}
       maxZoom={4}
       onlyRenderVisibleElements={false}

examples/nextjs/pages/Switch/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Node,
@@ -19,12 +19,14 @@ const nodesA: Node[] = [
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
     className: 'light',
+    ariaLabel: 'Input Node 1',
   },
   {
     id: '2a',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
     className: 'light',
+    ariaLabel: 'Default Node 2',
   },
   {
     id: '3a',
@@ -41,7 +43,7 @@ const nodesA: Node[] = [
 ];
 
 const edgesA: Edge[] = [
-  { id: 'e1-2', source: '1a', target: '2a' },
+  { id: 'e1-2', source: '1a', target: '2a', ariaLabel: null },
   { id: 'e1-3', source: '1a', target: '3a' },
 ];
 
@@ -52,18 +54,21 @@ const nodesB: Node[] = [
     data: { label: 'Input' },
     position: { x: 300, y: 5 },
     className: 'light',
+    ariaLabel: 'Input Node',
   },
   {
     id: '1b',
     data: { label: 'Node 1' },
     position: { x: 0, y: 100 },
     className: 'light',
+    ariaLabel: 'Node with id 1',
   },
   {
     id: '2b',
     data: { label: 'Node 2' },
     position: { x: 200, y: 100 },
     className: 'light',
+    ariaLabel: 'Node with id 2',
   },
   {
     id: '3b',
@@ -80,7 +85,7 @@ const nodesB: Node[] = [
 ];
 
 const edgesB: Edge[] = [
-  { id: 'e1b', source: 'inputb', target: '1b' },
+  { id: 'e1b', source: 'inputb', target: '1b', ariaLabel: 'edge to connect' },
   { id: 'e2b', source: 'inputb', target: '2b' },
   { id: 'e3b', source: 'inputb', target: '3b' },
   { id: 'e4b', source: 'inputb', target: '4b' },
@@ -90,8 +95,10 @@ const BasicFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
   const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
 
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback(
+    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
 
   return (
     <ReactFlow
@@ -102,6 +109,7 @@ const BasicFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
+      disableKeyboardA11y
     >
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
         <button

examples/nextjs/pages/UpdateNode/index.tsx

@@ -69,7 +69,6 @@ const UpdateNode = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      defaultZoom={1.5}
       minZoom={0.2}
       maxZoom={4}
       onNodesChange={onNodesChange}
@@ -85,10 +84,10 @@ const UpdateNode = () => {
         <label className={styles.bgLabel}>background:</label>
         <input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
 
-        <div className='updatenode__checkboxwrapper'>
+        <div className="updatenode__checkboxwrapper">
           <label>hidden:</label>
           <input
-            type='checkbox'
+            type="checkbox"
             checked={nodeHidden}
             onChange={(evt) => setNodeHidden(evt.target.checked)}
           />