How to make modeler keyboard accessible

Hi there,

I’m new to BPMN.IO. In my project, we’re trying to integrate bpmn.js as a custom BPMN modeler for our users. We’re also trying to make it as accessible as possible. Thus keyboard navigation is an important concern to us. We’re trying to reach the following goals:

  1. Let the user traverse though our BPMN model via TAB or CURSOR navigation
  2. Enable aria-labels to elements in order to support screen readers.
  3. Allow users to open our custom context pad and to traverse and select our custom actions via TAB+ENTER or TAB+SPACE.

I know that it’s possible to create custom elements and even hook into drawShape (see GitHub - bpmn-io/bpmn-js-example-custom-elements: An example of how to support custom elements in bpmn-js while ensuring BPMN 2.0 compatibility.). So I guess, it’s possible to add tabindex and aria-labels to shape elements too - somehow.

Handling key events however, turns out to be a bit complicated (hopefully I’m missing something):

Until now, I found out that after initializing the modeler, one can bind to keyboard events via

this.modeler = new Modeler({
      container: '#canvas',
      keyboard: {bindTo: document.getElementById('canvas')}
      additionalModules: [
        customControlsModule,
        camundaModdleExtension
      ],
      moddleExtensions: {
        camunda: camundaModdle
      }
});
this.modeler.get('eventBus').on('keyboard.keyup', 10000, (event) => console.log(event));

However, reacting to keyboard events might be difficult that way, because we’re lost in terms of scope. It would be nice to attach keyboard listeners to shape elements or custom actions to get some closure/context.

I would be happy, if anyone could point me to some example, docs or API.

To add the keyboard listeners, you could use the existing Keyboard module. Then, to change the selection, check out the selection module in diagram-js repo.

I think this might be a really cool plugin!