fix(a11y): turn off React Flow keyboard focus behaviour (#243)

Turn off draggable/focus behaviour for React Flow nodes and edges. This should make the course diagrams easier to use when navigating the page with the keyboard.
OxfordRSE · Jul 18, 2024 · 17b2f5b · 17b2f5b
1 parent 217250f
commit 17b2f5b
Showing 1 changed file with 3 additions and 0 deletions.
diff --git a/components/navdiagram/NavDiagram.tsx b/components/navdiagram/NavDiagram.tsx
@@ -441,6 +441,9 @@ const NavDiagram: React.FC<NavDiagramProps> = ({ material, theme, course, exclud
           maxZoom={2}
           fitView
           fitViewOptions={fitViewOptions}
+          edgesFocusable={false}
+          nodesFocusable={false}
+          nodesDraggable={false}
         ></ReactFlow>
       </div>
     </div>