Make drag-and-drop from palette keyboard-accessible

[lmbateman]

Problem you would like to solve

Keyboard accessibility for the drag-and-drop functionality in the palette has been requested. This will help us move toward satisfying WCAG SC 2.5.7. I'm marking it as a feature request rather than a bug because it's a Level AA requirement.

Proposed solution

I should be able to add elements to the canvas from the palette using only my keyboard.

There may be React libraries that can help with implementing this.

Alternatives considered

Leave things as they are.

Additional context

No response

[nikku]

@lmbateman thanks for opening this issue. We can already model, keyboard only:

(1) every diagram starts with a start event
(2) you can append to any element via a
(2.1) however this starts to break (as expected) as soon as you want to do more complex work on the cyclic graph. BPMN is not "top to bottom", as standard web pages are.

Could you check how other open canvas tools (Google Maps, Miro, drawing tools) handle accessibility - if we have a good idea what a working E2E interaction is, then we can consider to invest. Otherwise I'd be inclined to not follow the "just make buttons accessible" route - this brings not enough value to our users.

In general, I'd like to learn about your take about accessibility on the canvas.

[lmbateman]

Could you check how other open canvas tools (Google Maps, Miro, drawing tools) handle accessibility - if we have a good idea what a working E2E interaction is, then we can consider to invest.

Some links (for me to read tomorrow 🙂 ):

• Miro
• Figma
• Google Maps
• Visio
• More Visio
• PowerPoint

[barmac]

Moving to backlog as this requires dedicated effort.