This is a follow-up to #3032365: Table drag style update and #3023326: Field Cardinality Style Update.

CommentFileSizeAuthor
#12 claro-high_contrast_friendly_tabledrag_handle-3083048-12--rerolled-10.patch4.72 KBhuzooka
#12 Screenshot 2019-11-26 at 12.54.50.png56.09 KBhuzooka
#10 interdiff.txt2.45 KBrensingh99
#10 3083048-10.patch4.8 KBrensingh99
#8 3083048-8.patch2.39 KBshashikant_chauhan
#5 3083048-5.claro_.Provide-a-tabledraghandle-that-is-visible-in-Windows-highcontrast-mode.patch2.31 KBfhaeberle
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

huzooka created an issue. See original summary.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
CreditAttribution: huzooka at Cheppers for Acquia commented
Issue summary: View changes
Related issues: +#3032365: Table drag style update
fhaeberle’s picture

fhaeberle
he/him
Location 🇩🇪 Stuttgart
CreditAttribution: fhaeberle commented
Assigned: Unassigned » fhaeberle

I'll look into this and check the alternatives.

katrienc’s picture

katrienc
she/her
Primary language Dutch
Location Belgium
CreditAttribution: katrienc as a volunteer commented

Doesn't the icon has to be the same fill color as the text ? Now the fill color is #000 (claro.tabledrag.es6.js line 1711)

If you want to use the brighten filter, maybe the article on https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/ will help:

Icons with a fill color of #000, or rgb(0,0,0) will not brighten. You need to have a value greater than 0 in any of the rgb channels. fill: rgb(1,1,1) works great with a high brightness value such as brightness(1000), but even brightness(1000) will not work on pure black. This is not an issue with light colors and white.

fhaeberle’s picture

fhaeberle
he/him
Location 🇩🇪 Stuttgart
CreditAttribution: fhaeberle commented
Assigned: fhaeberle » Unassigned
Status: Active » Needs review
FileSize
3083048-5.claro_.Provide-a-tabledraghandle-that-is-visible-in-Windows-highcontrast-mode.patch2.31 KB

This is a quick start to this problem. I don't know if this is heading in the right direction.
The solution is inspired by this article on how to fix this problem.

Our icon system sets fill="currentColor" on each <svg>, and then CSS changes that element’s color to change the icon’s fill. Since High-Contrast Mode overrides the color of each element to ensure it shows up on its background, that means the fill will be similarly overridden. Bam! Guaranteed contrast.

katrienc’s picture

katrienc
she/her
Primary language Dutch
Location Belgium
CreditAttribution: katrienc as a volunteer commented

Good job!

It looks nice in the 4 high contrast profile in windows with Edge and also in firefox.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
CreditAttribution: huzooka at Cheppers for Acquia commented
Project: Claro » Drupal core
Version: 8.x-1.x-dev » 8.9.x-dev
Component: Code » Claro theme
Status: Needs review » Needs work
Issue tags: +Needs reroll
shashikant_chauhan’s picture

shashikant_chauhan CreditAttribution: shashikant_chauhan as a volunteer commented
Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
3083048-8.patch2.39 KB

Rerolled the Patch.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
CreditAttribution: huzooka at Cheppers for Acquia commented
Status: Needs review » Needs work

Patch #8 changed the post-processed CSS file, but not the source.

rensingh99’s picture

rensingh99 CreditAttribution: rensingh99 at Red Crackle commented
FileSize
3083048-10.patch4.8 KB
interdiff.txt2.45 KB

Hi,

I have changed post-processed CSS file as well as source file.

Thanks,
Ren

rensingh99’s picture

rensingh99 CreditAttribution: rensingh99 at Red Crackle commented
Status: Needs work » Needs review
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
CreditAttribution: huzooka at Cheppers for Acquia commented
Status: Needs review » Reviewed & tested by the community
FileSize
Screenshot 2019-11-26 at 12.54.50.png56.09 KB
claro-high_contrast_friendly_tabledrag_handle-3083048-12--rerolled-10.patch4.72 KB

Basically, I just re-rolled #10 with a minor (CS-related) change.

The provided patch made the drag handle visible in high-contrast mode even for IE11 and for MS Edge, so this is RTBC :)

Draggable table with indentation on Internet Explorer 11, with Hebrew (RTL) language

  • lauriii committed bdcfe6c on 9.0.x 
    Issue #3083048 by huzooka, rensingh99, fhaeberle, shashikant_chauhan:...

  • lauriii committed fbc5540 on 8.9.x 
    Issue #3083048 by huzooka, rensingh99, fhaeberle, shashikant_chauhan:...

  • lauriii committed 6bb7d7d on 8.8.x 
    Issue #3083048 by huzooka, rensingh99, fhaeberle, shashikant_chauhan:...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Version: 8.9.x-dev » 8.8.x-dev
Status: Reviewed & tested by the community » Fixed

Committed bdcfe6c and pushed to 9.0.x, 8.9.x and 8.8.x. Thanks!

Status: Fixed » Closed (fixed)

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