Improve the aural interface of the element template chooser

[rpkoller]

Is your feature request related to a problem? Please describe
I've tested the element template chooser in voiceover in macos 12.6.1 and safari 16.1 in camunda and eca in drupal.

Camunda (just pressing the up and down arrow key)

Screen.Recording.2023-01-16.at.20.05.01.mov

• there is no feedback without an entry how many options are available and after a string is entered in the search field the number of results.
• when tabbing through the list nothing is announced at all. no group names, no element title, no element description, no notice that there is a link to open the documentation for an element.
• that there are logos isn't announced as well but in that case it is fine since the logos are just decorational and don't add any benefit.

Camunda (using ctrl-option-arrow right key to step through the interface)

Screen.Recording.2023-01-16.at.20.05.50.mov

• there is no feedback without an entry how many options are available and after a string is entered in the search field the number of results.
• when stepping through the interface with ctrl-option-arrow right the group title connectors is announced but it isn't communicated that this is a group.
• and one element is chopped in two parts the logo and the title and description.
• there is also no indication that there is an open element documentation link. it is only accessible on hover with the mouse:

ECA (just pressing the up and down arrow key)

Screen.Recording.2023-01-16.at.20.06.45.mov

• there is no feedback without an entry how many options are available and after a string is entered in the search field the number of results.
• when tabbing through the list nothing is announced at all. no group names, no element title, no element description, no notice that there is a link to open the documentation for an element.
• the group option is basically skipped/ignored when tabbing through the list of elements

ECA (using ctrl-option-arrow right key to step through the interface)

Screen.Recording.2023-01-16.at.20.07.14.mov

• there is no feedback without an entry how many options are available and after a string is entered in the search field the number of results.
• when stepping through the interface with ctrl-option-arrow right the group title connectors is announced but it isn't communicated that this is a group.
• in eca there is just the element title. but it is announced three times (one opening a group then a clickable element and then the closing of the group - i mention it because as far as i know eca uses the bpmn components as is)
• there is also no indication that there is an open element documentation link. it is only accessible on hover with the mouse:

for other a11y directly related aspects of the element template chooser specific dedicated issues have already been opened:
bpmn-io/element-template-chooser#7. (the focus style of the element template chooser has a too low color contrast)
#736 (make logos decorational)
#738 (append the group name to the element titles)

Describe the solution you'd like

• it might be helpful to add an aural feedback how many elements are available when the search field gets into focus and another feedback how many matches were found or in case nothing was found a feedback that there are no matches.
• in regards what i would expect as a user using the interface. i would probably only using the up and down keys. that way there is the problem that you are only able to announce the title and description component. but how to add the element documentation link. for that you would have to use the tab? with the up and down button you advance vertically but the link is "horizontal". not sure how to handle that.
• same goes for the markup. the current state in camunda is you have an ul the first li is a group the rest of the li are elements containing two divs, one with span childs and one with a link element.
  

in ECA the group element is a div the group of elements associated with that group are contained in an ul

semantically both solutions aren't perfect. i think the cleanest approach would be a nested ul something like:

<ul>
<li>group 1  
  <ul>
    <li><button>one button</button></li>
    <li><button>another button</button></li>
  </ul>
</li>
<li>group 2
  <ul>
    <li><button>a button</button></li>
    <li><button>and another button</button></li>
  </ul>
</li>
</ul>

but i am still researching about the best approach and road to take. but it looks like perhaps an interactive element like a button element might be necessary. but as i said not sure yet. but just wanted to write up the general problem for a broader audience.

Describe alternatives you've considered

Additional context

[nikku]

Really valuable feedback, thank you. As this is one of our more complex components we really need to make sure to get accessibility right.

Maybe worth quoting relevant web documentation? There is loads of stuff we can do with aria-* accessibility hints.

[nikku]

I moved this one over to the core, as our replace / create / append anything tooling suffers from the same limitations.

[barmac]

This can be applied to both the popup menu and the context pad in diagram-js.