Claro primary tabs collapsed menu hamburger icon has insufficient contrast with forced-colors dark background

Created on 17 March 2025, about 1 month ago

Problem/Motivation

In forced-colors emulation on Firefox MacOS, the "hamburger" menu icon for the collapsed primary tabs (menu local tasks) does not adjust color.

On a dark background, the blue icon has insufficient contrast.

I'd guess that this also applies to WHCM, but that needs confirmation.

Steps to reproduce

  1. In the Firefox Configuration Editor, change browser.display.document_color_use to 2.
  2. In the Firefox color settings, change colors to get dark background, light text, and yellow links, with "Override" set to "Always".
  3. With Claro as the admin theme, go to /admin/content.
  4. Reduce the window size until the primary tabs collapse into a menu with the hamburger icon.

Like the table sort icons, the color of the hamburger icon should match the color of links:

Proposed resolution

  1. Change the icon to a background image.
  2. In a media query for forced-colors: active, use the CSS mask-image property with linktext background color.

For example, the table sort direction indicator:

  @media (forced-colors: active) {
    background: linktext;
    mask-image: url(../../images/icons/003ecc/sort--asc.svg);
  }

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.1 🔥

Component

Claro theme

Created by

🇺🇸United States kentr Durango, CO

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

Merge Requests

Comments & Activities

  • Issue created by @kentr
  • 🇳🇿New Zealand quietone

    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 .

  • 🇮🇳India sandip

    Hi @kentr, i think the proposed resolution may not work in this case as that hamberger menu is a svg image so we can add fill: linketext to its < path/> tag when forced color mode is active to fix this issue. Do you agree with it?

  • 🇺🇸United States kentr Durango, CO

    @sandip poddar:

    It should work... That said, my proposal was biased because I had been working on an issue where a media query inside the svg didn't work.

    Your proposal is simpler and less invasive, and I've also learned from @Curtis Wilcox in Slack that:

    • in this case the role is a button and the color should be ButtonText
    • because this is an inline SVG, using currentColor will allow the colors to inherit from the parent button which will have the correct color in forced-colors mode

    I updated the IS proposed resolution based on the suggestions from you and @Curtis Wilcox.

  • 🇺🇸United States kentr Durango, CO

    I'm also only finding this one instance in Claro of an inline SVG. Maybe it would be better to convert it to a background image for consistency.

    Ultimately, it's up to the maintainers.

  • 🇮🇳India sandip

    Hi @kentr,
    Thank you for the information. I'll proceed with raising a MR as outlined in the Proposed resolution.

    I'm also only finding this one instance in Claro of an inline SVG. Maybe it would be better to convert it to a background image for consistency.

    That sounds reasonable to me as well. If any maintainer agrees with this suggestion, I'll be happy to revert the changes. For now, I'll go ahead and raise the MR as mentioned in point #4.

  • Pipeline finished with Failed
    about 1 month ago
    Total: 402s
    #452995
  • 🇮🇳India sandip

    Attaching Screenshot for review.

  • Pipeline finished with Success
    25 days ago
    Total: 503s
    #461292
  • 🇺🇸United States smustgrave

    Seems there is some feedback on the MR.

  • 🇺🇸United States kentr Durango, CO

    Updating the IS to include other browsers.

  • 🇮🇳India sandip

    I am working on the feedback.

  • Pipeline finished with Failed
    14 days ago
    #470825
  • 🇮🇳India sandip

    Please review the changes.

  • Pipeline finished with Success
    14 days ago
    Total: 562s
    #470839
  • 🇺🇸United States kentr Durango, CO

    Passes testing on Mac in Edge, Firefox, Chrome.

    Does protocol dictate also testing on other platforms with system high-contrast modes (such as WHCM)?



    Gitlab won't let me resolve this MR comment, but it is resolved.

  • 🇮🇳India sandip

    Hi @kentr, I have marked the thread as resolved based on your confirmation.

  • 🇺🇸United States smustgrave

    Believe feedback to addressed for this one.

Production build 0.71.5 2024