Select-kitドロップダウン：選択/ハイライトされた項目の色のコントラストが低く、テキストとアイコンが消える

サポート
1

トピック通知ドロップダウン（Watching/Tracking/Normal/Muted）を使用すると、選択された項目のテキストとアイコンが、選択背景色と前景色のコントラストが不十分なために見えなくなります。

再現手順

  1. いずれかのトピックを開きます。

  2. トピック下部にある通知ベルボタンをクリックします。

  3. 現在選択されている通知レベル（例：「Tracking」）を観察します。

期待される動作

選択された項目は、コントラストが良好で、テキストとアイコンがはっきりと見えるはずです。

実際の動作

  • テキストラベルが消えるか、非常に読みにくくなります。

  • ベルアイコンが見えなくなります。

  • この問題はダークテーマで最も顕著ですが、カラーパレットによってはどのテーマにも影響を与える可能性があります。

技術的な詳細

app/assets/stylesheets/common/select-kit/select-kit.scss では、.is-selected 状態は背景色のみを設定し、前景のコントラストを保証していません。

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // テキストまたはアイコンの色のオーバーライドなし
}

--d-selected CSS変数はテーマの $selected 色から取得されますが、テキスト (.name, .desc) とアイコン (.d-icon) はデフォルトの色を保持しており、選択背景色とのコントラストが適切でない場合があります。

スクリーンショット

image
image531×470 11.9 KB

注：選択状態でのアイコンが消える別の画像も追加したかったのですが、新規のため現時点では画像を1枚しか追加できません。

環境

  • Discourse バージョン: latest

  • ブラウザ: Edge

  • テーマ: Foundation テーマ

「いいね！」 2
3

これは新規ユーザーに対する制限です。トラストレベルをすぐにレベル1に上げるために、既存のトピックをいくつか閲覧できます。

5

このバグを再現できません。

image
image479×406 22.3 KB

7

@BrettH セーフモードでも発生しますか？

8

お使いのカラーパレットはしばらく更新されていないようですね。なぜなら、それは通常の選択カラーではないからです。フォーラムを最後に更新したのはいつですか？

「いいね！」 2
9
10

ええ、その可能性が高いです。以前に新しい色が追加される前に作成されたカスタムカラーパレットが、コントラストの低い結果をもたらすような状況を私は見てきました… @BrettH 新しいカラーパレットを作成してそれを使用した場合、問題は解決しますか？

「いいね！」 2
11

皆様、ご提案ありがとうございます。ご質問にお答えします。

NateDhaliwal - セーフモードでのテストはまだですが、chapoiさんとKrisさんの説明からすると、カスタムパレットではなくデフォルトのLightパレットに戻るため、セーフモードで解決すると思います。

@chapoi - 良い質問です。私たちのカラーパレットはかなり前に作成されたもので、selectedとhoverの色がベースパレットに追加されるずっと前のものです。コミュニティを最初に立ち上げたときに設定され、それ以来更新していないと思います。

@awesomerobot - なるほど。コードを見ると、resolved_colorsがパレットにhoverとselectedがない場合にdark_light_diffを使用してフォールバック値を計算していることがわかります。しかし、問題はテキストの色（.name、.desc、.d-icon）がまだデフォルト値を使用しており、これらは私のダークテーマの計算されたフォールバック用ではなく、デフォルトのLightパレットの選択色用に設計されていることです。

新しいパレットを作成し、適切に対比する値にselectedとhoverの色を明示的に設定します。それで修正できると思います。

テスト中に思いついたのですが、フォールバックの計算でテキストのコントラストも考慮するようにするのは意味がありますか？そうすれば、古いパレットでも手動での介入なしに新しい色の追加に優雅に対応できます。単なるアイデアです。カラースキームは正しく設定するのが難しいことは承知しており、現在の方法はほとんどのケースをカバーしていると思われます。お役に立てるなら、別途機能リクエストを提出しても構いません。

特定にご協力いただきありがとうございます！

「いいね！」 2