Support DMN diagram accessibility

[ngohungphuc]

Is your feature request related to a problem? Please describe.

We are working on improving our accessibility by providing keyboard support that allowed user to be able to access the diagram using tab on the keyboard. Right now we don't see any kind of accessibility support for this library

Describe the solution you'd like

Support tab behaviour

Describe alternatives you've considered

This could be worth checking https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard

Additional context

None

[barmac]

Hi,

thanks for opening this issue. Could you please point out the places where the library could be more accessible? How would you imagine keyboard navigation of a diagram modeling tool?

[nikku]

To add to @barmac comments: The editor is decently keyboard navigatable, allowing you to tab back and forth between cells.

[ngohungphuc]

@barmac Sorry for late reply. You can see on the demo they keyboard is not accessible you have to click on the blue icon to go to the detail view and then you can use accessible feature from there like @nikku mentioned.

[barmac]

Thanks for sharing. How would you expect to reach the desired element? I can imagine that we switch the selection via TAB, but what order should we follow? Or maybe there is another way?
How do I drill-down? My bet is via ENTER, but then we also need to think of a way to exit the decision.

[ngohungphuc]

@barmac I hope that we can switch the selection via TAB.

[ngohungphuc]

So any idea how we should tackle this issue ? @barmac

[barmac]

I can see two ways to approach it:

1. Make elements focusable and use browser focus handling to switch elements. Change dmn-js selection when element is focused.
2. Change dmn-js selection on TAB and Shift+TAB based on the order in elementRegistry.

If I were to tackle this topic, I'd probably try out one of the approaches, and also examine if it is accessible for keyboard-only users. Afterwards, I'd think about how to open and exit decision tables and literal expressions.

[BrianJVarley]

I can see two ways to approach it:

1. Make elements focusable and use browser focus handling to switch elements. Change dmn-js selection when element is focused.
2. Change dmn-js selection on TAB and Shift+TAB based on the order in elementRegistry.

If I were to tackle this topic, I'd probably try out one of the approaches, and also examine if it is accessible for keyboard-only users. Afterwards, I'd think about how to open and exit decision tables and literal expressions.

Hey @barmac, I work with @ngohungphuc and opened a pull request here --> #802 to add support for keyboard focus & enter key events on both DrillDown and ViewDrd buttons.

Could you review the changes suggested in the PR?

Like you've described in point 2 we would like TAB key to sequentially focus on each DrillDown button on the DMN Diagram and trigger drilldown on ENTER key pressed. Also vice versa while focused on the ViewDrd button and hitting ENTER key this will minimise the decision table similar to the existing click event. This keyboard accessibility is not there in the latest release dmn-js.

Here is a short demo of this fix using MacOS Voiceover Utility: