Menu déroulant Select-kit : les éléments sélectionnés/surlignés ont un faible contraste de couleur, le texte et les icônes disparaissent

[BrettH (Brett)]

Lorsque vous utilisez le menu déroulant de notification de sujet (Watching/Tracking/Normal/Muted), le texte et l’icône de l’élément actuellement sélectionné deviennent invisibles en raison d’un contraste insuffisant entre la couleur d’arrière-plan de la sélection et les couleurs de premier plan.

Étapes pour reproduire

1. Ouvrez n’importe quel sujet

2. Cliquez sur le bouton de la cloche de notification en bas du sujet

3. Observez le niveau de notification actuellement sélectionné (par exemple, « Tracking »)

Comportement attendu

L’élément sélectionné doit avoir un texte et une icône clairement visibles avec un bon contraste.

Comportement actuel

• Le libellé du texte disparaît ou devient très difficile à lire

• L’icône de la cloche devient invisible

• Le problème est le plus visible dans les thèmes sombres, mais peut affecter n’importe quel thème en fonction de la palette de couleurs

Détails techniques

Dans app/assets/stylesheets/common/select-kit/select-kit.scss, l’état .is-selected définit uniquement la couleur d’arrière-plan sans garantir le contraste du premier plan :

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // Pas de remplacement de couleur pour le texte ou les icônes
}

La variable CSS --d-selected provient de la couleur $selected du thème, mais le texte (.name, .desc) et les icônes (.d-icon) conservent leurs couleurs par défaut, ce qui peut ne pas contraster correctement avec l’arrière-plan de la sélection.

Captures d’écran

Note : J'aurais ajouté l'autre image où l'icône disparaît pour l'état sélectionné, mais je suis nouveau et ne peux ajouter qu'une seule image pour le moment.

Environnement

• Version de Discourse : latest

• Navigateur : Edge

• Thème : Thème Foundation

[Noble_Fish]

@BrettH

𝑁𝑜𝑡𝑒:𝐼𝑤𝑜𝑢𝑙𝑑ℎ𝑎𝑣𝑒𝑎𝑑𝑑𝑒𝑑𝑡ℎ𝑒𝑜𝑡ℎ𝑒𝑟𝑖𝑚𝑎𝑔𝑒𝑤ℎ𝑒𝑟𝑒𝑡ℎ𝑒𝑖𝑐𝑜𝑛𝑑𝑖𝑠𝑎𝑝𝑝𝑒𝑎𝑟𝑠𝑓𝑜𝑟𝑡ℎ𝑒𝑠𝑒𝑒𝑙𝑐𝑡𝑒𝑑𝑠𝑡𝑎𝑡𝑒,𝑏𝑢𝑡𝑖′𝑚𝑛𝑒𝑤𝑎𝑛𝑑𝑐𝑎𝑛𝑜𝑛𝑙𝑦𝑎𝑑𝑑𝑜𝑛𝑒𝑖𝑚𝑎𝑔𝑒𝑟𝑖𝑔ℎ𝑡𝑛𝑜𝑤.

Ceci est une restriction pour les nouveaux utilisateurs. Vous pouvez parcourir certains sujets existants afin que votre niveau de confiance puisse rapidement atteindre 1.

[bryce (Bryce Huhtala)]

Je ne parviens pas à reproduire ce bogue.

[NateDhaliwal]

@BrettH Est-ce que cela se produit en mode sans échec ?

[chapoi]

@BrettH

La variable CSS --d-selected provient de la couleur $selected du thème, mais le texte (.name, .desc) et les icônes (.d-icon) conservent leurs couleurs par défaut, ce qui peut ne pas bien contraster avec l’arrière-plan de la sélection.

Il semble que votre palette de couleurs n’ait pas été mise à jour depuis un certain temps, car ce n’est pas la couleur de sélection normale. Quand avez-vous mis à jour votre forum pour la dernière fois ?

[Canapin (Coin-coin le Canapin)]

Pourrait-il être lié à

Discourse Free Plan setup - options are hard to read

Thanks for the details @NateDhaliwal. My hunch is that it’s related to that missing CSS var when light/dark mode is involved, and how it’s compiled via PostCSS. It looks like the browser may be falling back to the light mode background color, which is odd since I can’t reproduce this. Judging by the screenshots, my fix hadn’t been deployed to your instance yet. It should be deployed there now, so give it another try and let me know if you still notice anything off.

?

[awesomerobot (Kris)]

Oui, c’est probablement le cas — j’ai vu des situations comme celle-ci où une palette de couleurs personnalisée créée avant l’ajout de nouvelles couleurs finit par avoir un mauvais contraste… @BrettH si vous créez une nouvelle palette de couleurs et l’utilisez, le problème persiste-t-il ?