Don't base the token insertion process solely on the last clicked field

Created on 3 October 2024, about 2 months ago

Problem/Motivation

For keyboard users the process for inserting tokens is tricky. As highlighted in Add a hotkey to start the token browser Active you are either able to paste the token into the field that was last in focus before you reached the token browser or more likely you run into the First click a text field to insert your tokens into alert panel.
But the insertion process for keyboard users has another downside. The scenario where you have more than one field you want to paste tokens into. With the focus already inside the token browser you would have to close the token browser since the focus is kept within the dialog modal of the token browser (which is the correct behavior for dialog modals). But then you run again into the problem that you are only able to paste the token into the last text field in focus before you have reached again the browse available tokens link to open the token browser.
For screenreader users there might be the workaround to directly switch between the target element outside the token browser (for example with the rotor in voiceover), due to the fact that the dialog modal isnt using the dialog element for the token browser. But the list of elements only contained within the token browser is already overwhelming, with the rest of the elements not being excluded from the accessibility object model makes things even more hard to grok as well as navigate. They have to identify the text fields, remember their name and then find their way back to the token browser. With a small working memory an intimidating task.

* I've reviewed and discussed the ui of the token module from an a11y perspective together with @drupa11y - this issue is one of the results.

Steps to reproduce

with eca and bpmn_io installed, try to paste a token into the token to forward field for the trigger a custom event (entity aware) event provided by the eca_content sub-module.

Proposed resolution

Idea was to add a settings page for the token module where the user is able to select between different ways how tokens are inserted. the suggested options are:

  1. the current way, where you first have to click into the desired field and then click the token of choice in the token browser inserting the token in the chosen field.
  2. Clicking the token copies it into the clipboard and the user then is able to paste the token into the desired field.
  3. Point three is about fixing the main problem outlined in the problem and motivation section. make the token link a drop button and the options for each drop button is the list of available text fields on the page. that way the screenreader user is able to see the list of available fields the token at hand could be pasted into while remaining inside the context of the token browser to deliberately chose one or more fields a specific token should be pasted into.

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

1.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024