Barista: [Filterfeld] Der erste Eintrag scheint immer ausgewählt zu sein.

Erstellt am 20. Mai 2020  ·  10Kommentare  ·  Quelle: dynatrace-oss/barista

Fehlerbericht

Erwartetes Verhalten

Nur der Eintrag, über den die Maus fährt, sollte eingefärbt werden.

Aktuelles Verhalten

Der Eintrag, in dem die Maus schwebt, und der erste Eintrag sind farbig

Mögliche Lösung

Sollte behoben werden, da der Benutzer möglicherweise verwirrt ist, was er beim Klicken auswählen wird.

Schritte zum Reproduzieren

Probieren Sie einfach das erste Filterfeld hier aus:
https://barista.dynatrace.com/components/filter-field

  • Überprüfen Sie auch Autovervollständigung, Auswahl und Kombinationsfeld
  1. Gehen Sie zu https://barista.dynatrace.com/components/filter-field
  2. Klicken Sie auf das erste Filterfeld
  3. Bewegen Sie den Mauszeiger über den dritten Eintrag. Sie werden sehen, dass der erste Eintrag ebenfalls eingefärbt ist, als ob er "ausgewählt" wäre

Kontext (Umgebung)

Gefunden auf:
Firefox-Version: 76.0.1
Chrome-Version: 83.0.4103.61

Gebrauchte Versionen:

  • Knoten : >=10.13.0
  • Garn : >=1.13.0 <2
  • Typoskript : 3.8.3
  • eckig : 9.1.0
  • @angular/cdk : 9.2.0
  • @dynatrace/barista-components : 6.5.2

Anhänge

filter-field-bug

bug has-pr

Hilfreichster Kommentar

Ich stimme zu, das wurde schon viel zu lange verschoben. Eine sehr beliebte Methode, den ausgewählten Eintrag anzuzeigen, ist die Verwendung von Fettschrift. Dies würde dann unseren Schwebezustand (farbiger Hintergrund) nicht mehr stören. Was meinen Sie, sollten wir den aktiven Status in Fettschrift ändern?

Alle 10 Kommentare

Hallo @schobocop ! Dies ist ein Problem, mit dem wir uns schon seit langem auseinandersetzen. Es ist die automatische Vervollständigung / Auswahl des Dropdown-Hovers und die aktiven Zustände sehen genau gleich aus.
Wir hatten in der Vergangenheit bereits längere Diskussionen mit @dynatrace-oss/ux-core, aber ich bin mir sicher, dass wir das noch einmal aufgreifen können.
Irgendwelche Gedanken zu diesem @dynatrace-oss/ux-core?

Ich denke, es ist an der Zeit, dass wir etwas dagegen tun :)

Ich stimme zu, das wurde schon viel zu lange verschoben. Eine sehr beliebte Methode, den ausgewählten Eintrag anzuzeigen, ist die Verwendung von Fettschrift. Dies würde dann unseren Schwebezustand (farbiger Hintergrund) nicht mehr stören. Was meinen Sie, sollten wir den aktiven Status in Fettschrift ändern?

Was meinen Sie, sollten wir den aktiven Status in Fettschrift ändern?

@ursula-wieshofer sorry für die späte Antwort. Möchten Sie den Hintergrund der ausgewählten entfernen und die fette Schriftart hinzufügen oder den Hintergrund belassen und die fette Schriftart hinzufügen?

@tomheller Ich würde vorschlagen, den Hintergrund für den Hover-Zustand zu

@ursula-wieshofer Okay, das lässt uns mit folgendem Setup:

_selected_: Kein Hintergrund, Schrift fett
_hover_: Hintergrund, Schrift normal
_keyboardFocused_: Hintergrund ?, Schriftart ?

Müssen wir zwischen Hover- und Tastaturfokus unterscheiden oder sollten sie gleich aussehen?
Denken Sie daran, dass keyboardFocused und Hovered gleichzeitig auf 2 verschiedene Elemente angewendet werden können.

Bisher haben wir nie zwischen Hover- und Tastaturfokus unterschieden. Ich würde vorschlagen, den gleichen Look zu verwenden, da ich hier nie ein großes Problem gesehen habe.

Der Eintrag, in dem die Maus schwebt, und der erste Eintrag sind farbig

@schobocop Wir brauchen auch Hervorhebungen für die Tastaturunterstützung. Deshalb ist der erste Eintrag bereits markiert.
Wir werden eine Unterscheidung zwischen ausgewählt und fokussiert/schwebend hinzufügen, wie in der Diskussion mit @ursula-wieshofer angegeben

Bisher haben wir nie zwischen Hover- und Tastaturfokus unterschieden. Ich würde vorschlagen, den gleichen Look zu verwenden, da ich hier nie ein großes Problem gesehen habe.

@ursula-wieshofer Nun, wir brauchen eine Unterscheidung zwischen Keyboard-Selected- und Hovered-Styles. Derzeit werden beide gleich hervorgehoben.

image

Die erste wird per Tastatur und die zweite per Mauszeiger ausgewählt.

HINWEIS: VERLASSEN.
Vielleicht ist es der Trick, die ausgewählte Option für die Tastatur zu unterstreichen.
Der erste wird über die Tastatur ausgewählt.
Der zweite ist schwebend.

image

@ffriedl89 @tomheller @ursula-wieshofer Was meint ihr?

UPDATE: Mit Hilfe von Tom und Fabian haben wir herausgefunden, dass nur eine Option ausgewählt werden sollte. Das bedeutet, dass die Tastaturauswahl verworfen wird, wenn eine andere Option darüber bewegt wird und umgekehrt.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen