Barista: 【フィルターフィールド】常に最初のエントリーが選択されているようです。

作成日 2020年05月20日  ·  10コメント  ·  ソース: dynatrace-oss/barista

バグレポート

予想される行動

マウスを置いたエントリのみに色を付ける必要があります。

現在の動作

マウスをホバーしたエントリと最初のエントリに色が付いています

考えられる解決策

ユーザーがクリックしたときに何を選択するか混乱する可能性があるため、修正する必要があります。

再現する手順

ここで最初のフィルターフィールドを試してください。
https://barista.dynatrace.com/components/filter-field

  • オートコンプリート、選択、コンボボックスもチェックしてください
  1. https://barista.dynatrace.com/components/filter-fieldにアクセス
  2. 最初のフィルターフィールドをクリックします
  3. 3番目のエントリにカーソルを合わせます。 最初のエントリも「選択済み」のように色付けされていることがわかります

コンテキスト(環境)

見つかった場所:
Firefoxバージョン:76.0.1
Chromeバージョン:83.0.4103.61

使用バージョン:

  • ノード:> = 10.13.0
  • :> = 1.13.0 <2
  • タイプスクリプト:3.8.3
  • 角度:9.1.0
  • @ angular / cdk :9.2.0
  • @ dynatrace / barista-components :6.5.2

添付ファイル

filter-field-bug

bug has-pr

最も参考になるコメント

私は同意します、これはすでにあまりにも長く延期されています。 選択したエントリを表示する非常に一般的な方法は、太字のフォントを使用することです。 これにより、ホバー状態(色付きの背景)が妨げられることはなくなります。 アクティブな状態を太字に変更する必要があると思いますか?

全てのコメント10件

こんにちは@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キーボードで選択したスタイルと、ホバーしたスタイルを区別する必要があります。 現在、両方とも同じように強調表示されています。

image

1つ目はキーボードで選択され、2つ目はマウスホバーで選択されます。

注:却下。
キーボードで選択されたオプションに下線を引くのがコツかもしれません。
最初のものはキーボードを使用して選択されます。
2番目はホバーされます。

image

@ ffriedl89 @tomheller @ ursula-wieshoferどう思いますか?

更新:トムとファビアンの助けを借りて、1つのオプションのみを選択する必要があることがわかりました。 別のオプションがホバーされた場合、またはその逆の場合、キーボードの選択が閉じられることを意味します。

このページは役に立ちましたか?
0 / 5 - 0 評価