Summary clicks

[ludoboludo]

Why are these changes introduced?

Fixes #383

What approach did you take?

Use user-select: none; Instead we're thinking of customizing the background color upon ::selection. Check the issue's comment for more info.

Other considerations

Demo links

• Store
• Editor

Things to test

Try and select the text across the theme:

• on buttons,
• on buttons with secondary style,
• text,
• links,
• variants,

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ludoboludo]

@Guillaumegranger1 would you maybe have time to review the approach ? Or let me know if I should get in touch with another designer 🙂
You can test using the links in the PR description.

[Guillaumegranger1]

I like this a lot. There only seems to be an issue when I chose the Background 1 Color scheme, because the highlight doesn't repurpose the color that's assigned to the text. Here's a screen recording of that.

[ludoboludo]

I like this a lot. There only seems to be an issue when I chose the Background 1 Color scheme, because the highlight doesn't repurpose the color that's assigned to the text. Here's a screen recording of that.

Should be taken care of now. I was using the link color rather than text.

[ludoboludo]

@svinkle if you want to have a look and see if there is any concerns in terms of color contrast.

[svinkle]

Expect text color contrast to be at least 4.5:1:

• ✅ #414141 / #d0d0d0: 6.61:1 (default text)
• ✅ #ffffff / #5a5a5a: 6.89:1 (white on black)
• 🛑 #ffffff / #5e75bf: 4.39:1 (blue product badge)

There may be other instances and I didn't test all default colors.

1. Cmd + a to select everything
2. Grab color values using macOS Digital Color Meter
3. Test values with contrast-ratio.com

[ludoboludo]

I took a look and it seems good to me with the default colors. When trying the sales badge, you get a couple different color values for the white text. If I take the whitest part then it seems good: rgb(88,113,194) and rgb(254,254,255) for a 4.57 contrast ratio 🤔
Not sure if it's fair to base ourselves on that though.

[tauthomas01]

This looks good 👍

[tauthomas01]

Out of curiosity, do we also need to apply this in the base.css?

[ludoboludo]

.button--secondary in base.css is setting the variable --color-button-text to a new color.

And for .button::selection the background color is set to the variable --color-button-text. So it updates it automatically 👌

[kmeleta]

LGTM

[ludoboludo]

I took a look and it seems good to me with the default colors. When trying the sales badge, you get a couple different color values for the white text. If I take the whitest part then it seems good: rgb(88,113,194) and rgb(254,254,255) for a 4.57 contrast ratio 🤔
Not sure if it's fair to base ourselves on that though.

@svinkle let me know what you think. If you want to take another look maybe and give a 👍 or 👎