Problem/Motivation

AttributesWidget::settingsForm() calls addTokenTreeLink(), so each attributes prop gets its own "Browse available tokens." link on its own row, between the textfield and its source button.

Components often have several attributes props. Bootstrap Grid 1 column has three in a row: attributes, container attributes, container wrapper attributes. The form then shows three identical links:

  • Visual noise: three rows per prop instead of two, in a sidebar or an off-canvas where space is short.
  • The link sits between the field and the button that belongs to it, which weakens their grouping.
  • A link under each field suggests it targets that field. It does not: the token module inserts into the last focused text field of the page (drupalSettings.tokenFocusedField). Focus URL, open the link under Attributes, click a token: it lands in URL.

The link is still needed: AttributesWidget::getPropValue() replaces tokens, and TokenSource does not support the attributes prop type, so this widget is the only way to put a token in attributes. The link is how users learn that.

Example browse

Related, found while checking: after a row is refreshed by AJAX (open then cancel the source selector), tokenFocusedField still points to the replaced input. A token clicked then goes into the detached input: nothing is inserted, and no alert shows. Users must click the field again. This comes from the token module and is independent of the link placement.

Proposed resolution

Render the link once per component props form instead of once per prop. Within one component form, all props share the same source contexts, so they get the same token types and the same link.

For example, ComponentPropsForm keeps the first token link of its props and drops the others at pre-render. The link stays visible and focusable, one per form.

Since the link does not pick a target, it should say what to do, for example "Click a field, then browse available tokens." Today the instruction only shows as an alert after a failed insert.

Options considered

  • Drop the link from AttributesWidget: hides a working feature with no other way to find it.
  • Move the link into the field description: SourcePluginBase::buildConfiguration() defaults description_display to invisible, so descriptions are visually hidden in every context. The link would be focusable but not visible: WCAG 2.4.7 Focus Visible failure.

Remaining tasks

  • Agree on where the single link goes: after the first prop using it, or next to the "Props" heading.
  • Agree on the link text.
  • Check the token dialog still opens after an AJAX refresh of the row holding the kept link.

User interface changes

One "Browse available tokens." link per component form instead of one per attributes prop, with a short instruction to focus a field first.

CommentFileSizeAuthor
#3 example_browser.jpg30.41 KBmogtofu33

Comments

mogtofu33 created an issue. See original summary.

mogtofu33’s picture

Issue summary: View changes
mogtofu33’s picture

Issue summary: View changes
StatusFileSize
new30.41 KB
mogtofu33’s picture

Issue summary: View changes