Icons are invisible in high contrast mode

Created on 22 February 2024, 10 months ago
Updated 17 April 2024, 8 months ago

Problem/Motivation

I've tested the tugboat instance @ckrina provided today with the high contrast mode in Microsoft Edge on macOS Sonoma. All the icons in the navigation bar are invisible:

Steps to reproduce

1. access the admin ui
2. open devtools and in the rendering pane enable the following three points:

  • enable automatic dark mode
  • forced colors active
  • prefers contrast more

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

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.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • 🇷🇺Russia kostyashupenko Omsk

    Long task.
    Forced colors active disables background images and mask images.
    I see only one solution -> is to rework method of rendering icons in our navigation. Instead of CSS background images we should use {{ source(path-to-icon, true) }} and rework css accordingly

  • 🇷🇺Russia kostyashupenko Omsk

    Any other opinions how to solve this task with minimal effort?

  • 🇪🇸Spain ckrina Barcelona

    We've used background images for Claro and Olivero, so they can be used :)
    You can see the work done in Claro in #3130305: Ensure all of Claro's background images are visible in forced colors mode. with a great explanation from @andrewmacpherson in comment #5 .

  • Assigned to kostyashupenko
  • 🇷🇺Russia kostyashupenko Omsk

    holy @ckrina. It works :O
    gonna dig more & maybe complete this ticket

  • Merge request !214Icons are invisible in high contrast mode → (Merged) created by kostyashupenko
  • Issue was unassigned.
  • Status changed to Needs review 9 months ago
  • 🇷🇺Russia kostyashupenko Omsk

    Should be ok now. Works in MS Edge also

  • Pipeline finished with Success
    9 months ago
    Total: 277s
    #134278
  • Status changed to Needs work 9 months ago
  • 🇪🇸Spain ckrina Barcelona

    Great! Could you implement it to the new styles just merged for the drawer? It's was a big MR and this has conflicts. Thanks @kostyashupenko!

  • Pipeline finished with Success
    9 months ago
    Total: 209s
    #135042
  • Status changed to Needs review 9 months ago
  • 🇷🇺Russia kostyashupenko Omsk

    Rebased, conflicts resolved. Yarn lint:css tells that there are linting problems in toolbar-popover.pcss.css file. However i didn't touch this file in the scope of this ticket, so should be resolved in some other issues. Current MR contains only required changes by this ticket.

  • Pipeline finished with Success
    9 months ago
    Total: 211s
    #135043
  • Status changed to Fixed 9 months ago
  • 🇪🇸Spain ckrina Barcelona

    Merged, thanks @kostyashupenko!

  • Pipeline finished with Success
    9 months ago
    Total: 345s
    #135091
  • 🇩🇪Germany rkoller Nürnberg, Germany

    hm i haven't noticed that the issue got in yesterday. but testing it now with the latest version of 1.x-dev in edge on macos (enable automatic dark mode ticked, forced-colors active and prefers-contrast:more) the icons, the icon within the expand and collapse button, the carrets as well as the right border of the drawer are barely visibly or invisible (in case of the right border) :/

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Pipeline finished with Failed
    4 months ago
    Total: 503s
    #266526
  • Pipeline finished with Failed
    4 months ago
    Total: 296s
    #266531
  • Pipeline finished with Failed
    4 months ago
    Total: 315s
    #266542
  • Pipeline finished with Success
    4 months ago
    Total: 369s
    #266547
  • Pipeline finished with Failed
    4 months ago
    #268697
  • Pipeline finished with Success
    4 months ago
    Total: 300s
    #273688
  • Pipeline finished with Success
    4 months ago
    #273823
  • Pipeline finished with Failed
    4 months ago
    Total: 349s
    #275457
  • Pipeline finished with Failed
    3 months ago
    Total: 305s
    #286050
  • Pipeline finished with Failed
    2 months ago
    Total: 337s
    #314661
  • Pipeline finished with Failed
    2 months ago
    Total: 336s
    #315255
  • Pipeline finished with Failed
    2 months ago
    Total: 346s
    #316140
  • Pipeline finished with Failed
    2 months ago
    Total: 331s
    #316358
  • Pipeline finished with Failed
    2 months ago
    Total: 344s
    #317376
  • Pipeline finished with Failed
    2 months ago
    Total: 337s
    #317597
  • Pipeline finished with Failed
    2 months ago
    Total: 645s
    #317601
  • Pipeline finished with Failed
    about 2 months ago
    Total: 477s
    #317971
  • Pipeline finished with Success
    about 2 months ago
    Total: 175s
    #319164
  • Pipeline finished with Failed
    about 2 months ago
    Total: 271s
    #319610
  • Pipeline finished with Success
    about 2 months ago
    Total: 405s
    #319619
  • Pipeline finished with Success
    about 2 months ago
    Total: 387s
    #319686
  • Pipeline finished with Success
    about 2 months ago
    Total: 374s
    #324241
  • Pipeline finished with Success
    about 2 months ago
    Total: 584s
    #324322
  • Pipeline finished with Success
    about 2 months ago
    Total: 343s
    #324481
  • Pipeline finished with Success
    about 2 months ago
    Total: 143s
    #329011
  • Pipeline finished with Success
    about 2 months ago
    Total: 140s
    #329016
  • Pipeline finished with Success
    about 1 month ago
    #345107
  • Pipeline finished with Success
    about 1 month ago
    Total: 1358s
    #345308
  • Pipeline finished with Success
    5 days ago
    Total: 1166s
    #371468
  • Pipeline finished with Success
    4 days ago
    Total: 1306s
    #371655
  • Pipeline finished with Failed
    4 days ago
    Total: 1084s
    #371693
  • Pipeline finished with Failed
    4 days ago
    Total: 1224s
    #371738
  • Pipeline finished with Canceled
    4 days ago
    Total: 1067s
    #371760
  • Pipeline finished with Success
    4 days ago
    Total: 1068s
    #371778
Production build 0.71.5 2024