Increase the perceptibility of the drop buttons

Created on 13 February 2025, 5 months ago

Problem/Motivation

The following is not a compliance issue with WCAG2.2, but in case of the popup for drop buttons on for example admin/content you have the problem that the popup is rather hard to distinguish from the regular background. For example in light mode you have a white background against a white background, the component that gives the popup its shape is the box-shadow which is barely visible, for the top border of the popup even non-existent.

In dark mode both backgrounds are somehow distinguishable, but they are still close, and the box-shadow is invisible.

Either way it requires an increased cognitive effort to find and process that there is a popup, therefore it is considered best practise, to aim for a higher color contrast for the popup against its background layer (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or drop_buttons.xlsx.zip → for more details).

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, @drupa11y, and @itmaybejj

Steps to reproduce

Click the caret next to one of the edit buttons on admin/content

Proposed resolution

Increase the color contrast of the popup against the background layer, some ideas that were raised was either to add an outline, or to use the accent color as the background color for the popup and invert the background color for the hovered option in light mode accordingly.

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.

Drupal CMS a11y

wcag143

wcag1411

Comments & Activities

Issue created by @rkoller
Comment 5 months ago →
🇨🇦Canada mgifford Ottawa, Ontario
This would be a useful usability improvement.

Comment 9 days ago →

🇨🇦Canada mgifford Ottawa, Ontario

I think that this builds better with the custom colors, but also allows for greater visibility:

.dropbutton-wrapper.open .dropbutton__items,
.dropbutton__items {
  background: var(--gin-bg-layer3, #fff);
  border-radius: var(--gin-border-l, 6px);
  padding: 0.5em;
  min-width: 120px;
  z-index: 9999;
  box-shadow:
    0 4px 8px rgba(var(--gin-color-primary-rgb, 0, 0, 0), 0.4),
    0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

This certainly allows us to customize it more.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024