Selected color not highlighted in entry page

[arlingga]

Hi guys, this is a great and helpful plugin, thank you for making it real!

We are currently running on Craft CMS 3.7.18 and Craft Colour Swatches 1.4.2. It is working great, however when we select a color in the entry page, the selected color seems like losing its focus. The selected ring/shadow around the color is missing.

[arlingga]

Sorry guys, turns out it was nothing to do with the plugins, it was Craft CMS issue and already resolved by Craft CMS 3.7.18.1. Can close this one. Cheers!

[mtnorthrop]

Would it be possible to re-open this issue? The bug described here actually still exists as of Craft CMS 3.7.20.

The problem is this code in Craft's stylesheets (src/web/assets/cp/src/css/_cp.scss):

.reduce-focus-visibility {
  :focus:not(.focus-visible) {
    box-shadow: none;
  }

  .focus-visible {
    box-shadow: $darkFocusRing;
  }
}

This is setting box-shadow: none; at a higher specificity than Color Swatches' rule in ColourSwatches.css:

.color-swatches button.active {
    box-shadow: 0 0 0 3px #F2842D;
}

I would suggest finding a different way of highlighting the selected option, since it seems that Craft has taken over the box-shadow property of form fields. Maybe we could use the ::after pseudo element, or choose a different way of indicating the selected color option?

[circa1983]

Looking at the css a quick fix would be to update ColourSwatches.css and change line 58 from: .color-swatches button.active { to

.reduce-focus-visibility .color-swatches button.active,
.color-swatches button.active {

I realise this isn’t the most eligate solution and long term the @mtnorthrop ’s suggestion of using a pseudo element, or choose a different way of indicating the selected color option would be more appropriate

[michtio]

I am currently going to use the quick fix in specificity that @circa1983 suggested @mtnorthrop

A more robust / better solution will be go out in a next release right before our x-mas break, so I will leave this issue open for the time being.

[michtio]

This quick and dirty fix has been released:

https://github.com/percipioglobal/craft-colour-swatches/releases/tag/1.4.2.1