Seit dem kürzlichen Update auf 2.8.0.beta2 ist der Button zum Admin-Menü gelb hervorgehoben.
Ich dachte, Discourse wolle mir etwas mitteilen, aber selbst nach einer Suche im Internet und in diesem Forum habe ich keine Ahnung, was das sein könnte.
Ja, korrekt, wie @simonk angemerkt hat, bestand einer unserer Fehler darin, den Fokus nicht auf Overlays zu setzen. Der Fokus muss beim Navigieren in der Anwendung an einer sinnvollen Stelle liegen.
Ich denke, wir sollten in unserem CSS von :focus zu :focus-visible wechseln. Es wird noch nicht von Safari unterstützt, aber in diesem Fall ist es einfach, auf :focus als Fallback zurückzugreifen.
Wenn das aktive Element :focus-visible entspricht und ein Skript den Fokus an eine andere Stelle verlagert, sollte das neu fokussierte Element ebenfalls :focus-visible entsprechen.
Das bedeutet: Wenn Sie das Hamburger-Menü durch Tabbing öffnen (was den :focus-visible-Stil aktiviert), erscheint dieser Stil, sobald das Menü geöffnet ist. Wenn Sie das Menü jedoch mit einem Zeigegerät öffnen, wird der :focus-visible-Stil nicht angezeigt:
Es gibt einen Nachteil: In einer gemischten Eingabesituation, in der Sie das Hamburger-Menü mit einem Zeigegerät öffnen und dann versuchen, mit der Tabulatortaste zu navigieren, ist der :focus-visible-Stil beim ersten Link nicht sichtbar (obwohl er technisch gesehen fokussiert ist), sodass es so aussieht, als würde er übersprungen. Ich bin mir nicht sicher, ob es dafür eine Workaround-Lösung gibt…
Da ich (meistens) eine Maus benutze, erwarte ich genau dieses Verhalten.
Andererseits verwende ich manchmal mein Smartphone mit Touchscreen: Das gleiche Problem tritt dort auf. „Admin“ ist hervorgehoben, was darauf hindeutet, dass es im Admin-Bereich etwas Wichtiges gibt, das Aufmerksamkeit erfordert.
Aus dem verwandten Thema für Bildschirmleser geht hervor, dass es notwendig zu sein scheint, den Fokus irgendwie zu setzen.
Ich wäre bereits mit dem oben genannten Verhalten für Zeiger zufrieden.
Ich glaube nicht, dass dieses Element derzeit den von euch gewünschten UX-Wert bietet – wir haben sofort Fehlerberichte dazu aus unserem Forum erhalten. Der Fokus verschwindet, wenn man irgendwo im Fenster mit der rechten Maustaste klickt, und beim Hover über Buttons tritt ein doppelter Fokus auf. Insgesamt wirkt es für Benutzer fehlerhaft, besonders da Discourse diese Auswahl in keiner anderen Ansicht erzwingt.
Es wäre besser, den Tastaturfokus nur dann anzuzeigen, wenn der Benutzer erstmals Tab drückt, oder nur dann, wenn der Benutzer die Hamburger-Menü-Öffnung mit einer Tastaturaktion ausgelöst hat.
Ich sehe das Gleiche in Safari und Firefox (macOS); dies wird auch im oben genannten Beitrag erwähnt:
Wenn ich dieses Feature richtig verstehe, sollte ich das Menü durch Klicken oder Drücken von = öffnen und dann mit etwas (Pfeiltasten?) navigieren und etwas (Enter?) drücken, um zum hervorgehobenen Element zu gelangen.
In Safari und Firefox unter macOS kann ich, egal ob ich das Menü per Klick oder mit = öffne, nicht innerhalb des Menüs navigieren. Die Pfeiltasten nach oben/unten bewegen die Seite nach oben/unten, die Pfeiltasten nach links/rechts haben sichtlich keine Wirkung.
Tab wechselt den Fokus auf etwas anderes, z. B. auf einen „Gefällt mir“-Button in einem Beitrag, und entfernt die gelbe Hervorhebung aus dem Menü. Das Tabulieren in Firefox hat zuvor durch die Menüpunkte zyklisch geführt, bevor ich diese Antwort schrieb, funktioniert jetzt jedoch nicht mehr; zwischen diesen Versuchen wurde ein privates Fenster geschlossen.
Ich beobachte dieses Verhalten hier auf Meta und auf meiner eigenen Instanz, die auf efbc2481d8 aktualisiert ist (außer dass das Tabulieren in Firefox erfolgreich funktioniert, was ich nur hier gesehen habe).
Die Pfeiltasten sollten nichts bewirken, aber Tab und Enter sollten!
Wenn du also das Menü mit = öffnest und Tab drückst, durchläufst du nicht die Menüpunkte? Ich bin unter macOS und es funktioniert wie erwartet in Safari, Firefox und Chrome, was etwas verwirrend ist!
Ich habe mir genauer angesehen, was hier im Allgemeinen vor sich geht, und die Idee, focus-visible zu verwenden, wie oben erwähnt, wird nicht funktionieren.
Das Problem ist, dass das Hamburger-Menü in unserem HTML außerhalb des Menü-Button-Containers erscheint (dem Container, der Such-, Hamburger- und Benutzer-Buttons enthält). Das bedeutet, dass das Menü nicht direkt in der natürlichen Tab-Reihenfolge folgt. Um dies auszugleichen, setzen wir mit JavaScript den focus auf den ersten Menüpunkt. Dies hat den Nebeneffekt, dass das Element hervorgehoben wird (da wir auch :focus-Stile benötigen).
Ich glaube nicht, dass wir uns darauf verlassen können, einen Tab-Druck zu erkennen, da dies nicht die einzige Taste ist, die Bildschirmlesegeräte zur Navigation verwenden, und wir würden andere Tastenkürzel beeinträchtigen, wenn wir alle Tastendrücke abfangen würden…
Ich kann mir zwei mögliche Lösungen vorstellen:
Das Menü im HTML so verschieben, dass es direkt nach dem auslösenden Button erscheint. Dies könnte einige Layout-Nebeneffekte haben.
Den Fokus innerhalb des Menüs einfangen, wenn es geöffnet ist, aber keinen bestimmten Element den Fokus setzen. Das bedeutet, wenn das Menü geöffnet ist, kannst du nur seinen Inhalt durch Tabulation durchlaufen und nichts anderes auf der Seite. Ich denke, das ist wahrscheinlich die bevorzugte Lösung…
Richtig. Zur zusätzlichen Präzisierung: Es handelt sich um macOS 11.4 und Safari 14.1.1. Ich sehe meta in einem privaten Fenster und meine eigene Instanz in einem nicht-privaten Fenster.
Ich habe mein anfängliches Testen von Firefox wohl falsch durchgeführt. Es funktioniert so, wie du es beschreibst, wenn die Systemeinstellung „Tastaturnavigation verwenden, um den Fokus zwischen Steuerelementen zu verschieben
Ich habe die Ursache für mein Problem in Safari gefunden. Mir ist aufgefallen, dass im Gegensatz zu Chrome und Firefox beim Klicken in die Kopfzeile und anschließendem Drücken der Tab-Taste kein Element in der Kopfzeile ausgewählt wird.
Das führte zur Entdeckung dieser Einstellung in Safari unter Erweitert:
Ich bin zu 99 % sicher, dass dies bei einer frischen Installation von Big Sur die Standardeinstellung ist; ich glaube nicht, dass ich das geändert habe. Wenn diese Einstellung aktiviert ist, funktioniert es so, wie Sie es beschreiben. Wie der Text oben andeutet, funktioniert es auch mit Option+Tab, wenn die Einstellung deaktiviert ist.