Select elements show two carets in Forced Colors mode

Created on 13 February 2025, 2 months ago

Problem/Motivation

Select elements, for example in the filter section on admin/content or admin/appearance/settings/gin, display two downward facing carets.

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

    Show only a single caret in Forced Colors mode same as in light and dark 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.

  • Usability

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

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia jaydev bhatt Pune, Maharashtra

    i'm checking this issue.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia jaydev bhatt Pune, Maharashtra

    i have checked this issues on Drupal 11.1.1
    with the steps mention above. double checked it. but was not able to replicate this issue.

    Steps for testing.

    1. Download and enabled the gin theme and cleared the cache.
    2. Enable the dark mode and activated the focus colors mode
    3. tried giving it the different colors
    4. Checked on the contnet type page as well.

    Attaching the screenshot for reference.

    Moving this to Needs Review.
    After the verification can be moved to RTBC.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    I am working on it.

  • Pipeline finished with Success
    2 months ago
    Total: 225s
    #423098
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    Make the suggested changes :)

    Before:

    After:

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada mgifford Ottawa, Ontario

    Amazing. Thanks for quickly replicating this @sandip poddar.

    There are a lot of other resources here if needed https://www.drupal.org/project/drupal/issues/3413207 ๐Ÿ“Œ META: Provide better support for color and contrast media queries Active

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    @mgifford, Thanks for sharing the resource ๐Ÿ˜„

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia snehal-chibde

    hello @sandip poddar , I have checked your MR on drupal 11.
    Gin Admin Theme version 4.0.x.

    The changes are working as expected and now a single caret icon is seen in the focus color dropdown.

    Added before and after screenshots for reference.

  • Pipeline finished with Success
    2 months ago
    Total: 204s
    #426374
  • Pipeline finished with Success
    2 months ago
    Total: 189s
    #426375
  • Pipeline finished with Success
    2 months ago
    Total: 169s
    #426391
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    Fixed some twerk as double carets were only appearing in dark mode so used unnecessary !important :( I had initially missed this, but now everything is looking good :)

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sdhruvi5142

    Hi,
    Applied the MR!579 on drupal 11.1.1 and it is working as expected.

    Testing Steps:
    1. Download and enabled the gin theme and cleared the cache.
    2. Enable the dark mode and activated the forced color mode
    3. Observe the changes there.

    Testing Result:
    After applying the patch, the Select elements aren't showing two carets in Forced Colors mode. Attached screenshot for reference.

    Observation to review once:
    @sandip poddar But here I observe one thing that Caret Icon in the field is more right aligned and there is very less space between Icon and Field Border. As per my opinion the spacing should be more, same like normal mode(without forced colored mode enabled). Attached screenshot for reference.

    Status - Needs Review

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    I am looking into it.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    Hi @rkoller, @saschaeggi,

    I am currently facing an issue where the second caret in the <select> element is coming from the browserโ€™s default styling. When enabling forced color mode, the default arrow appears due to appearance: revert.

    If I remove the background image, the browserโ€™s default arrow remains, but the challenge is that it is positioned too far to the right, and we cannot style it. On the other hand, if I use appearance: none, the default arrow disappears, and we must rely on a background image, which we can style.

    However, with prefers-color-scheme: dark and forced-color-mode: active, the background image needs to be dark, while for prefers-color-scheme: light with forced-color-mode: active, it should be white in colour.

    Could you please advise on the best approach:

    1. Keeping the browserโ€™s default arrow and removing the background image, or
    2. Removing the default arrow and using a background image that adapts based on prefers-color-scheme?

    Looking forward to your suggestions.

  • Pipeline finished with Success
    24 days ago
    Total: 203s
    #462329
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia debrup

    I have tested the fix in a Drupal 11.1.6 site.

    • Reproduced the issue first by activating force color in browser.
    • Applied MR579 to apply the fix.
    • Confirmed that the patch was working. No double caret found in select elements across the site after activating forced colors in the browser.
    • Checked that the fix also worked for light mode with forced colors active.

    Attaching ss of the fixed dropdown for better clarity. Moving the issue to RTBC.

Production build 0.71.5 2024