Navigation module button icons are obscured when in Windows High Contrast

Thanks for https://devtoolstips.org/tips/en/emulate-forced-colors/

Believe I'm seeing the issue being described and MR is making it better.

i have one question. Sorry

can it use same class selector? [class*="toolbar-button--icon"]

This is a good thought, but unfortunately the "toolbar-button--icon--xxxx classes are added even if an icon doesn't exist. If we apply the styles to the items that do not have icons, then the helper text (the two letters) doesn't show.

Markup with an icon

Markup WITHOUT an icon

Given MR resolves mentioned issue.
Reviewed and can be moved forward.

Steps to reproduce

1. Observed this issue with light theme(local set up windows/Mac ).
2. Tested on Drupal version 11X and 10.3
3. Install and open site in chrome
4. Inspect and follows steps given in https://devtoolstips.org/tips/en/emulate-forced-colors/
5. This will display page in high-contrast mode.
6. Check icons.
7. Given MR is fixing issue
8. Attaching screenshot for before and after.

Will say screenshots seem similar to whats already uploaded but believe @finnsky the question has been answered

Hello!

I got my answer.

But I can't say that I think this fix is ​​necessary or even urgent.

Because in some foreseeable future we will have the ability to accurately understand whether there is an icon or not.
The existing solution was added temporarily. And I don't think that we need to perfect the temporary solution.

So for now we can leave only "@container style(--icon)" or even delay this task until we have controlled icons.

But it's still up to the community to decide.

Thanks for participating!

Can I get a followup (postponed) and a link in the CSS comment to remove this once the temporary solution is fixed?

Thanks!

The CSS rule can be simplified like @finnsky suggested in the MR

The CSS rule can be simplified like @finnsky suggested in the MR

See my comment in #6. The CSS rules cannot be simplified (unless all browsers support style queries). The reason is that all buttons get assigned a class with that includes [class*=toolbar-button--icon--], even if there is no SVG icon.

The style query works fine. But doesn't yet support FF and Safari (Safari's not a big deal because I don't believe people use that with Windows High Contrast).

So to be clear, I'm going to remove the long list of selectors, create (and postpone a followup), and then add a @todo?

@mherchel, i think yes. Actually maybe TODO not needed.

This issue will not reproduced when we will know when button has icon:

https://www.drupal.org/project/drupal/issues/3432173 📌 Decide strategy to customize or provide 1st level menu items' icons Active

Work should happend soon as far as i understand:
https://drupal.slack.com/archives/C7AB68LJV/p1724335022875359

Maybe we should postpone this until that is done. We're in no hurry here as far as I know.