Improve the perceptibility of contextual link buttons

Created on 13 February 2025, 5 months ago

Problem/Motivation

  • The border of the contextual link button is rather light, in particular in light mode, where the background of the page is also white. The pencil icon appears on hover, but it still requires some cognitive effort to process that there is a button and that this button is clickable (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or contextual_links.xlsx.zip for more details).

  • The label for the contextual link is redundant and missing a context most of the time. For example on the frontpage in Olivero for Drupal CMS you have in the rotor in VoiceOver eight entries with Open configuration options, toggle button, two entries with Open latest configuration options, toggle button, and three entries that provide a specific context: Open Primary tabs configuration options, toggle button, A celebration of Drupal and open-source contributions configuration options, toggle button, and
    Open footer configuration options, toggle button".</li>
    <li>In Forced Colors mode the contextual link buttons have no pen icon on hover, neither in Gin nor in Olivero. [#Icons are invisible]</li>
    <img src="/files/issues/2025-02-13/contextual_link_fcm.jpg" alt="the filter media field set in forced color mode with the contextual link button shown in the upper right corner with just the border the pencil icon missing" />
    </ul>
    
    
    Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y
    
    <h4 id="summary-steps-reproduce">Steps to reproduce</h4>
    <ul>
    <li>Check the contextual link buttons on either <code>admin/content/media-grid

    or on the frontpage in Olivero. For testing the issue in Forced Colors mode make sure that you’ve switched to dark mode before.

Proposed resolution

  • Increase the color contrast for the border in light mode so it meets 3:1, so the button gets a higher affordance and gets easier noticed. Same for the dark mode, due to the thin border, the border looks kind of jagged (not sure if that is the right term in english) - it is simply not a clearly recognizable button.
  • Add context to the button label for screenreader users.
  • Consider showing the contextual button in the context of layout builder all the time: https://www.drupal.org/project/drupal/issues/3037742 🐛 The toggle that makes Contextual Links visible at all times might not be sufficiently discoverable Active
  • Ensure that the pen icon is shown in Forced Colors mode on hover (related to [#Several icons and images are invisible in Forced Colors mode])

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

4.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

  • Issue created by @rkoller
  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇨🇦Canada mgifford Ottawa, Ontario

    Ok, lets minimize the SVG and have it use the ButtonFace so it is more easily customizable

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="ButtonFace" d="M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z"/></svg>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="ButtonFace" stroke-width="3" d="m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3"/></svg>

    I think there will be better ways to do this, but just looking at the issue of the forced colors mode

    @media (forced-colors: active) {
      /* Contextual trigger (pen icon) */
      .contextual .trigger {
        forced-color-adjust: none !important;
        background-color: ButtonFace !important;
        color: ButtonText !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        border: 1px solid ButtonText !important;
        width: 26px;
        height: 26px;
        opacity: 1 !important;
      }
    
      .contextual .trigger:hover,
      .contextual .trigger:focus-visible {
        background-color: Highlight !important;
        color: HighlightText !important;
        outline: 2px solid Highlight !important;
      }
    
      /* Remove button (X icon) */
      .media-library-item__remove {
        forced-color-adjust: none !important;
        background-color: ButtonFace !important;
        color: ButtonText !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='ButtonFace' stroke-width='3' d='m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.75rem;
        border: 1px solid ButtonText !important;
        opacity: 1 !important;
      }
    
      .media-library-item__remove:hover,
      .media-library-item__remove:focus-visible {
        background-color: Highlight !important;
        color: HighlightText !important;
        outline: 2px solid Highlight !important;
      }
    
      /* Edit button (pen icon) */
      .media-library-item__edit {
        forced-color-adjust: none !important;
        background-color: ButtonFace !important;
        color: ButtonText !important;
        border: 1px solid ButtonText !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.75rem;
        opacity: 1 !important;
      }
    
      .media-library-item__edit:hover,
      .media-library-item__edit:focus-visible {
        background-color: Highlight !important;
        color: HighlightText !important;
        outline: 2px solid Highlight !important;
      }
    }

    There is some JS which is is hiding edit pen when the mouse isn't hovering over the form:

    <form class="views-exposed-form" aria-label="Filter the contents of the Media view" data-drupal-selector="views-exposed-form-media-library-page" action="/admin/content/media-grid" method="get" id="views-exposed-form-media-library-page" accept-charset="UTF-8" data-once="exposed-form">

    It converts this:

    <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>
    

    to this:
    <button class="trigger focusable" type="button" aria-pressed="false">Open configuration options</button>

    But it doesn't trigger for keyboard users (focus).

    It should always be visible, especially in a high contrast mode.

  • 🇨🇦Canada mgifford Ottawa, Ontario

    This CSS is an issue in both Gin & Claro, so this isn't a Gin specific issue. The CSS works reasonably well in both.

  • 🇨🇦Canada mgifford Ottawa, Ontario

    This occurs in the media system, but not sure it is restricted to it.

  • 🇳🇿New Zealand quietone

    In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies . Thanks

Production build 0.71.5 2024