Claro chevron looks like a diamond when in forced colors mode within Edge.

Within Firefox, it may not meet the contrast criteria.

Within Edge, this is happening because transparent borders are made opaque in forced colors mode. We need to completely remove the unneeded borders (not just make them transparent).

https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/themes/clar...

We should probably convert this to either use CSS mask image, or use CSS borders to create the chevron.

MS Edge:

Firefox:

CommentFileSizeAuthor
#6 3269341-9.4.x-6.patch3.15 KBmherchel
#5 3269341-whcm-claro-arrows--edge.PNG12.13 KBkurttrowbridge
#5 3269341-whcm-claro-arrows--firefox.PNG13.42 KBkurttrowbridge
#5 3269341-whcm-claro-arrows--chrome.PNG12.54 KBkurttrowbridge
#4 3269341-10.0.x-4.patch3.06 KBmherchel
#2 details-afater.gif46.75 KBmherchel
#2 details-before.gif44.33 KBmherchel
#2 3269341.patch1.64 KBmherchel
Windows_11__1_.png34.46 KBmherchel
details-normal.png53.89 KBmherchel
details-forced.png37.57 KBmherchel

Issue fork drupal-3269341

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

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
StatusFileSize
new 3269341.patch1.64 KB
new details-before.gif44.33 KB
new details-afater.gif46.75 KB

Drupal 10 patch attached.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

💩 Doesn't work properly in FF

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
StatusFileSize
new 3269341-10.0.x-4.patch3.06 KB

New patch works properly in all browsers.

kurttrowbridge’s picture

kurttrowbridge
he/him
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3269341-whcm-claro-arrows--chrome.PNG12.54 KB
new 3269341-whcm-claro-arrows--firefox.PNG13.42 KB
new 3269341-whcm-claro-arrows--edge.PNG12.13 KB

Tested this in Windows High Contrast Mode with the patch applied, and the chevrons are looking good in Chrome, Edge, and Firefox now. I've attached screenshots from just one of the default color themes, but confirmed that all four appeared as expected, both when the element is opened or closed.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3269341-9.4.x-6.patch3.15 KB

Discussed this with @lauriii earlier today. Attached is a patch for 9.4.x that also supports IE11.

Using the same method, so leaving RTBC.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Version: 10.0.x-dev » 9.4.x-dev

Changing to 9.4.

ckrina opened merge request !2100

  • ckrina committed ab4a24f on 10.0.x 
    Issue #3269341 by mherchel, KurtTrowbridge: Claro <details> element not...

  • ckrina committed a64c04c on 9.4.x 
    Issue #3269341 by mherchel, KurtTrowbridge: Claro <details> element not...
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Version: 9.4.x-dev » 9.3.x-dev

Committed ab4a24f and pushed to 10.0.x. and 9.4.x. Thanks!

I'll leave this open to port it to 9.3.x after the patch release.

  • lauriii committed 4630d6f on 9.3.x authored by ckrina 
    Issue #3269341 by mherchel, KurtTrowbridge: Claro <details> element not...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Cherry-picked to 9.3.x ✌️

Status: Fixed » Closed (fixed)

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