Increase the perceptibility of the drop buttons

Created on 13 February 2025, about 2 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.