Making workflow editor more accessible

[harshit-soora]

Related to issue #5262

Fixed following

• Landmarks to navigate easily between canvas and buttons
• Intentional DOM order inside canvas (put launchers in same order as select, and before edges)
• Descriptive labels on launch button
• Label on launcher select widget
• Selecting the entire launcher without pressing any buttons, in order to use the 'delete launcher' button
• Selecting edges for delete (and should respond to enter key to select when they have focus)
• Text representations on edges, so that an edge can be focused, the user is able to know which launchers that edge connects

[Bubballoo3]

This is a great start. There are still some details to work out with focus navigation and connect/delete buttons, but that is easily the hardest part of the whole thing so no problem if it takes a little back and forth to nail down.

For example it llooks like the launchers end up in the order that they render, which is effectively random. They should be rendering in the same order that they appear in the project.

The only thing that I don't see addressed at all here is the edge selection. Like you did with launchers, edges should be focusable, communicate their position in the graph (eg. 'Edge from launcher A to launcher B' and respond to 'Enter' the same as a click.

If you want to handle graph communication (eg. labeling the entire canvas with text like 'Workflow graph containing 3 launchers. Launcher A with no dependecies. launcher B with no dependencies. Launcher C depends on launcher A and launcher B') in a different PR I think that is totally reasonable given the complexity with generating and updating the text.

Finally I think we should only try to tackle the UI in this PR, you can revert the form and I'll handle that separately.

[Bubballoo3]

stroke color is already being set by the main css rule. Overriding it during focus just means there is no way to tell if an edge is focused and selected. So the stroke rule here should just be removed.

[Bubballoo3]

I have tried playing around with the values here (including just removing it) and can't see any difference. It seems to be related to shadow or something, but might not be working the way you intend. If it is doing something on your end, could you attach screenshots of the effect?

[harshit-soora]

Sure, let me play around the css and add screenshots.

[Bubballoo3]

This is coming along super nicely and is currently very usable with just a keyboard. There are a few final points with css, but this is easily 95% of the way there.