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:

umami admin page with the new navigation bar how in windows high contrast mode where all the icons are invisible to the sighted user

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

CommentFileSizeAuthor
#11 contrast.jpg60.43 KBrkoller
high_contrast.jpg163.02 KBrkoller

Issue fork navigation-3423277

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rkoller created an issue. See original summary.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

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

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

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

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

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.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko

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

kostyashupenko opened merge request !214

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned
Status: Active » Needs review

Should be ok now. Works in MS Edge also & thanks for this knowledge, didn't know about it

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Needs work

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!

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review

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.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Fixed

Merged, thanks @kostyashupenko!

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
StatusFileSize
new contrast.jpg60.43 KB

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) :/

the navigation modules sidebar with the drawer expanded in windows high contrast mode

Status: Fixed » Closed (fixed)

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