マウスを置いたエントリのみに色を付ける必要があります。
マウスをホバーしたエントリと最初のエントリに色が付いています
ユーザーがクリックしたときに何を選択するか混乱する可能性があるため、修正する必要があります。
ここで最初のフィルターフィールドを試してください。
https://barista.dynatrace.com/components/filter-field
見つかった場所:
Firefoxバージョン:76.0.1
Chromeバージョン:83.0.4103.61
こんにちは@schobocop ! これは私たちがすでに長い間直面している問題です。 オートコンプリート/選択ドロップダウンホバーであり、アクティブな状態はまったく同じに見えます。
過去に@ dynatrace-oss / ux-coreと長い議論を重ねてきましたが、これを再検討できると確信しています。
これについて何か考えは@ dynatrace-oss / ux-core?
私たちはこれについて何かをする時だと思います:)
私は同意します、これはすでにあまりにも長く延期されています。 選択したエントリを表示する非常に一般的な方法は、太字のフォントを使用することです。 これにより、ホバー状態(色付きの背景)が妨げられることはなくなります。 アクティブな状態を太字に変更する必要があると思いますか?
アクティブな状態を太字に変更する必要があると思いますか?
@ ursula-wieshofer応答が遅れてすみません。 選択した背景を削除して太字フォントを追加しますか、それとも背景を残して太字フォントを追加しますか?
@tomhellerホバー状態の背景を残し、選択したエントリの背景を削除して太字フォントを使用することをお勧めします;)
@ ursula-wieshofer了解しました。これで、次の設定が残ります。
_selected_:背景なし、フォントは太字
_hover_:背景、通常のフォント
_keyboardFocused_:背景?、フォント?
ホバーとキーボードフォーカスを区別する必要がありますか、それとも同じように見える必要がありますか?
KeyboardFocusedとhoveredは、2つの異なるアイテムに同時に適用できることに注意してください。
これまで、ホバーとキーボードフォーカスを区別することはありませんでした。 ここで大きな問題を見たことがないので、同じ外観を適用することをお勧めします。
マウスをホバーしたエントリと最初のエントリに色が付いています
@schobocopキーボードサポートのために強調表示も必要です。 そのため、最初のエントリはすでに強調表示されています。
@ ursula-wieshoferとのディスカッションで述べたように、選択されたものとフォーカスされた/ホバーされたものの区別を追加します
これまで、ホバーとキーボードフォーカスを区別することはありませんでした。 ここで大きな問題を見たことがないので、同じ外観を適用することをお勧めします。
@ ursula-wieshoferキーボードで選択したスタイルと、ホバーしたスタイルを区別する必要があります。 現在、両方とも同じように強調表示されています。
1つ目はキーボードで選択され、2つ目はマウスホバーで選択されます。
注:却下。
キーボードで選択されたオプションに下線を引くのがコツかもしれません。
最初のものはキーボードを使用して選択されます。
2番目はホバーされます。
@ ffriedl89 @tomheller @ ursula-wieshoferどう思いますか?
更新:トムとファビアンの助けを借りて、1つのオプションのみを選択する必要があることがわかりました。 別のオプションがホバーされた場合、またはその逆の場合、キーボードの選択が閉じられることを意味します。
最も参考になるコメント
私は同意します、これはすでにあまりにも長く延期されています。 選択したエントリを表示する非常に一般的な方法は、太字のフォントを使用することです。 これにより、ホバー状態(色付きの背景)が妨げられることはなくなります。 アクティブな状態を太字に変更する必要があると思いますか?