Contrib.social

The toggle that makes Contextual Links visible at all times might not be sufficiently discoverable

Open on Drupal.org →
Created on 5 March 2019, over 5 years ago
Updated 21 September 2023, 9 months ago

Problem/Motivation

In most places where we use contextual buttons they are visually hidden, until you hover over the associated block, or tab to the button.

This means they are difficult for some users to operate:

  • Speech control users may not know the buttons are there at all.
  • Speech control users who employ the "show numbers" tool (or similar) may see some activation numbers, but not understand what control they are associated with. (The spatial positioning of the control numbers can sometimes be haphazard, and is occasionally skewed by things like CSS layout.)
  • Touch screen users (without a hover-capable pointer) may not know the buttons are there, and can have difficulty hitting the target if it's not visible.
  • Keyboard users can perceive and operate the buttons, because they appear when focused. However they face increased effort to keep track of where they are, compared to other controls which are permanently visible. Blocks have varying sizes, and the boundaries between blocks are often not apparent, so which makes it hard to predict where the next contextual menu button is located spatially. Overshooting the intended button is an easy mistake to make, and this sometimes leads to accidental activation of the wrong control.
  • The temporary appearance of the button means it is easily missed. This can affect a wide range of users with cognitive and/or learning impairments, and extends into mainstream usability.

These problems are mitigated in most existing use cases: the contextual menus are just providing shortcuts. Users can still take the structured route through the admin toolbar menu to reach the correct page for these tasks.

However, in Layout Builder contextual buttons are critical to carrying out most tasks. Instead of being shortcuts for actions in the admin toolbar, they are being used as the sole entry point for layout builder tasks. This puts users from any of the above groups at a considerable disadvantage.

Proposed resolution

In layout builder, make the contextual visible all the time.

Who benefits?

  • Sighted speech control users.
    • Helps them know the button is there at all
    • Helps when using the show-numbers tool; you can see which number corresponds with a visible button
  • Sighted keyboard users. Makes tabbing through buttons easier to follow and predict.
  • Pointer users, without hover capability (e.g. finger on iPad). Less chance of missing the target if you can see what you are aiming for.
  • Makes it easier to learn how layout builder works, for lots of users.

Remaining tasks

patch.

User interface changes

Contextual menu buttons are visible all the time in layout builder.
This doesn't involve any graphic design changes.

API changes

TODO

Data model changes

TODO

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Layout builder  →

Last updated about 2 hours ago

Created by

🇬🇧United Kingdom andrewmacpherson

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.

  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

  • Usability

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

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇨🇦Canada mgifford Ottawa, Ontario
  • Comment 9 months ago →
    🇺🇸United States arnoldbird

    The problem is more general than some commenters suggest. For example, if you place a block inside a mega menu, there is no way to access the contextual links for the block. Even if you do click the Edit link in the upper right of the header this only reveals the locations of the contextual links -- it doesn't open them. As a result, as soon as you click on the pencil icon inside a mega menu, then menu section (in many sites) will close before there is any opportunity to access the links. The developer either has to hunt for some way to open the contextual link with custom code, or add a separate edit link to the block template with custom code.

    Separately, the text for the Edit button should be something like "Show contextual link locations," to be accurate. Or, in a perfect world, it should read "Show contextual links" and should not only reveal the pencil icons, but also reveal the links themselves.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024