Suggestion: replace the React Flow diagrams with CSS grids

[eatyourgreens]

The landing page navigation, for course materials, uses a React Flow diagram that's hard to use in a screen reader, from the keyboard or just on a small phone or tablet screen.

I think it could be replaced by a CSS grid, where each grid item is an ordered list of links. If hierarchical structure is important, the content could be marked up as nested HTML lists, where each list is styled as a CSS grid to give more-or-less the same layout.

[npch]

+1 to this - as implemented it's difficult to navigate even using a mouse, and while it's nice to have the diagram to show the flow of the lessons, it shouldn't be the main way you navigate to a particular one.

[martinjrobins]

The difficulty with replacing the react flow graphs with CSS grids is that its not just a set of columns, or even a tree / hierarchical structure. Its a directed acyclic graph, so I'm not sure if there is an easy way of doing this in CSS (or even if you could that it would be easier to navigate than the existing react flow implementation). There must be good examples of accessible DAG visualisation online that we can learn from however?

Assuming we fix #195, I think that the react flow diagrams are really useful for navigation if you are on a keyboard + mouse and are on a desktop with a sufficiently large screen (e.g. you can go directly from a theme to a particular section of a course, and you get the dependecy information which gives you more context on how the sections relate to each other). On phones / tablets / screenreaders however the react flow diagrams are rubbish, so it would be good to have an alternative for navigation on these devices. This could just be a linear list of sections/courses within each course/theme, based on the files attribute of the yaml metadata?

[eatyourgreens]

The difficulty with replacing the react flow graphs with CSS grids is that its not just a set of columns, or even a tree / hierarchical structure. Its a directed acyclic graph, so I'm not sure if there is an easy way of doing this in CSS (or even if you could that it would be easier to navigate than the existing react flow implementation). There must be good examples of accessible DAG visualisation online that we can learn from however?

That's a good point about the graph. Right now, the flow diagrams are an unordered set of buttons in the DOM. Here's a screenshot from the Firefox accessibility inspector:

Success Criteria 1.3.1: Info and Relationships is a level A WCAG requirement, and specifies that any visual relationships on the page must also be expressed programmatically.

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

[eatyourgreens]

The Scientific Computing page might be a bad example, but even in a desktop browser, the individual links are so small that they would fail accessibility requirements for legible text.

[martinjrobins]

Here is the react flow guidelines on accessibility: https://reactflow.dev/learn/advanced-use/accessibility

looks like you can set a specific tab order via tabIndex={0}

[eatyourgreens]

From those accessibility docs:

Nodes are only moveable with arrow keys when nodesDraggable and nodesFocusable are true (default behaviour).

That explains why you can tab through the connectors by default, but maybe we should turn that off. Do the individual boxes need to be moveable?

[eatyourgreens]

I see what they've done now. There's a div with role=button, tabindex=0 and a description provided by aria-describedby. That makes the individual nodes accessible from the keyboard. However, the button wraps a link. You aren't allowed to nest one interactive element inside another in the DOM, as it makes behaviour ambiguous. Does clicking this navigate the link or activate the button? Or both? Is the node text content the link text, or the button description? I'm 90% sure this particular pattern would fail an accessibility audit.