Gin settings visually broken in Forced Colors mode

Open on Drupal.org →

Created on 13 February 2025, 5 months ago

Problem/Motivation

There are several different problems on the Gin settings page in Forced Colors mode:

The active state for the selected option of the Appearance selection component is not perceivable.
The options in the accent color switch component are empty white circles, while the color of the logo in the upper left corner of the window is still being adjusted as the chosen accent color is changed.
There are other issues that have been raised in more specific issues, such as:
- The toggle on the "Gin switch" is invisible in the unchecked state ( 🐛 Increase the color contrast for Gin switches Active )
- Focusable elements in the header have only a dotted outline, meanwhile in the settings fieldset the accent color and focus color have a solid focus indicator, but the rest of the components’ focus outlines are invisible ( 🐛 Improve the accessibility of focus outlines Active )
- Several icons, the images on navigation drupal toolbar and the layout density setting are not displayed ( 🐛 Several icons and images are invisible in Forced Colors mode Active )
- Select fields show a second caret in dark mode with the Forces Colors mode active ( 🐛 Select elements show two carets in Forced Colors mode Active )

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

Steps to reproduce

Switch to the dark mode, activate the Forced Colors mode, and then go to admin/appearance/settings/gin

Proposed resolution

Ensure that the selected active color mode is visible on the appearance switch element.
Show the accent colors in the accent color switch component within the circles, same as in light and dark mode
Make the toggle visible for Gin switch components, also in the unchecked state.
Ensure that focusable elements have a solid and visible focus outline.
Make sure that all the icons and images are displayed
Ensure that no second caret is shown for select fields

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

wcag1411

Sign in to follow issues

Comments & Activities

Issue created by @rkoller
Comment 5 months ago →
🇨🇦Canada mgifford Ottawa, Ontario
Great find. For more on testing for High Contrast Mode see:
https://bbc.github.io/accessibility-news-and-you/checklist/how-to/high-c...

Also, here is some guidance from Microsoft styling for forced colors
https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-...

Comment 12 days ago →

🇨🇦Canada mgifford Ottawa, Ontario

There is going to be some overlap with https://www.drupal.org/project/gin/issues/3506350 🐛 Several icons and images are invisible in Forced Colors mode Active

Target is the Gin settings page admin/appearance/settings/gin

For the first item, this patch should be useful as this does provide an alternative for forced-colors:

@media (forced-colors: active) {
  input[type="radio"] {
    appearance: auto !important;
    forced-color-adjust: auto !important;
  }

  /* Reset default label styling for all options */
  input[type="radio"] + label {
    all: unset;
    display: inline-block;
    padding: 0.2em 0.5em;
  }

  /* Style the selected option */
  input[type="radio"]:checked + label {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    border: 2px solid HighlightText !important;
  }

  input[type="radio"]:focus-visible + label {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024