Contrib.social

Improve the Browse available tokens link

Open on Drupal.org →
Created on 3 October 2024, about 2 months ago

Problem/Motivation

At the moment Browse available tokens is a link and also styled as a link. The expectation associated with a link is that it is going "somewhere". But instead, clicking the link is doing "something" on the current page - opening a dialog modal. Strictly speaking the behavior of the Browse available tokens link is what you would expect from a button (see https://yatil.net/blog/buttons-vs-links). In addition to that it is not clear that a dialog modal will be opened on the current page based on the link text.

* 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

Proposed resolution

First consider making the Browse available tokens link a button and style it as a button. That way the Browse available tokens wouldn't be listed within the link section of for example the voiceover rotor.

Add the aria-haspopup="dialog" to the button element. The button would be announced as Browse available tokens dialog popup button in voiceover. That way it would be clear to a screenreader user that clicking the button would open a dialog modal.

An option might be leaving the link a link element, still add aria-haspopup="dialog" to the link element, but style the link as an action link instead. That would prevent the potential confusion for sighted user, for screenreader users the link would be still listed underneath link section in the rotor in voiceover, but at least the screenreader would announce in the case of voiceover dialog popup link Browse available tokens. That way it would be clear that the link will trigger an action on the page by opening a dialog modal.

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
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.

  • Usability

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

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • Comment about 1 month ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    This makes sense to me.

  • Comment about 20 hours ago →
    🇺🇸United States apmsooner

    I'm actually wondering if a custom form element could be created to make it also more flexible. I'm thinking sort of a split button style where a settings subform expands where you could modify some of the properties that would influence performance while browsing. It doesn't have to be saved anywhere although a global token settings form could be helpful to replace what token_tweaks module was doing.

    • recursion_limit: This is currently hardcoded to 3 and restricts being able to see anything any deeper. This could be a dropdown ranging from 1 to x(whatever max makes best sense).
    • global_types: This could be a checkbox
    • entity_types: optionally limit via checkboxes

    The subform could trigger an ajax event that updates the browser link itself. I'm doing something similar in a custom form but it would be nice if token module supported this so it could be used anywhere.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024