Contrib.social

Token browser as expandable form, replacing modal

Open on Drupal.org →
Created on 23 November 2024, 11 days ago

Problem/Motivation

The Token modal has worked well, but can also be a bit slow to use, since you almost always need to move and resize it, before finding the right token.

Steps to reproduce

Use the Token browser, and need to resize and move the modal continually.

Proposed resolution

We could make the tokens available via an expanding form, directly on the page, to allow immediately scrolling down through the available tokens. This will lead to several improvements in the UI:

  1. There is no need for resizing and dragging the modal
  2. A lot of tokens can be immediately visible
  3. There is no longer a width problem, where token lines break

The new expandable form should be set as default going forward, while allowing those who still want the modal to switch to that, so the modal might stay as an option under Token settings.

On the other hand, if abandoning the modal makes everything easier accessibility-wise, maybe it's time to let the modal go?

See Tokens-in-form.mp4 → , and images below for a mock-up, where the expanding form element is inserted below the original "Browse available tokens." link.

Token form collapsed

Token form expanded

Remaining tasks

Decide if it's a good idea, and if yes, create the feature.

If an expanding form is superior to a modal accessibility-wise, perhaps it should be abandoned?

If not, the modal could stay as a Token setting radio button option, where expanding form should be set to default, with modal as an alternative option.

User interface changes

Token browser switches from modal to an expanding form.

API changes

Data model changes

📌 Task
Status

Active

Version

1.0

Component

User interface

Created by

🇩🇰Denmark ressa Copenhagen

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.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

  • Issue created by @ressa
  • Comment 11 days ago →
    🇩🇰Denmark ressa Copenhagen
  • Comment 11 days ago →
    🇩🇪Germany rkoller Nürnberg, Germany

    Interesting idea. There is only one problem, with the token browser being in a modal you have the problem that the field the token is pasted into is the last clicked field, with the token browser going into a fieldset it is a similar problem. so if you are keyboard and or screenreader user that might still problematic but i imagine it also tricky for regular sighted users using the mouse. you are in the context of the same page all the time and you dont switch between the dialog and the "main" page so how to know where to paste the token? i've linked an issue as a related issue we've summarized the problem space and provided a few potential solutions: ✨ Don't base the token insertion process solely on the last clicked field Active .... but all that discussion in this issue here as well as the discussion in the other issue about the idea of having a drop button boils down to the more fundamental question in which direction the ui of the token module should be heading which is covered in 📌 Token UI 2.0 Active . and the suggestion in this issue is one of the potential directions imho. but still that might need a bigger discussion. as a start i could put the token ui 2.0 issue on the agenda of one of the next ux meetings as well as bring it to the a11y office hours to get a few more perspectives.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024