Icon Flyout / slidern ähnlich wie bei meiner Navigation

[Rolf B]

Hallo einsiedler,

ich schaue mir das jetzt schon eine Weile an und habe auch die Styles, die für die generische Flyout-Box relevant sind und die Styles, die für die konkreten Instanzen dieser Box gebraucht werden, separiert. Das war ein ganz schönes Durcheinander. Den Esel als 97K SVG solltest Du übrigens besser als passend großes PNG ausliefern und ihm mehr Kontrast geben, der ist ein Beispiel für ein SVG, an dem der Browser sich müde rendert.

Aber jetzt habe ich ein blödes Problem identifiziert, die die Bedienbarkeit erschwert: Die versteckten Items sind zwar unsichtbar, aber man kann sie weiterhin per Tab erreichen. Würdest Du den Flyout-Inhalt einfach verstecken (hidden oder display.none), dann wäre das kein Thema. Aber durch die Animation kann man den Flyout-Inhalt nicht einfach verstecken, denn er muss ja da bleiben, bis die Animation endet.

Ich sehe jetzt zwei Optionen, beide brauchen JavaScript.
(a) auf das transitionend Event registrieren und bei Erreichen des Endes den Content auf hidden setzen. Das muss natürlich entfernt werden, sobald das Flyout wieder geöffnet wird.
(b) im click-Handler des Buttons alle anklickbaren Elemente mit tabindex -1 versehen.

Beides ist kompliziert und lästig, das Problem entsteht halt nur wegen der Flyout-Animation. Bevor ich einfach mache...

Ich habe ein bisschen recherchiert, 2017 wurde mal andiskutiert, ob man den tabindex nicht per CSS verändern können sollte - das artete dann in Umordnung der Tab-Reihenfolge aus und irgendwann scheint es versandet. @Gunnar Bittersmann, gibt's da tatsächlich keine CSS Eigenschaft, um ein Element gegen antabben zu schützen? user-select oder pointer-events ist es ja nicht. Hier steht zwar etwas über directional focus navigation und das scheint das Ergebnis der genannten Diskussion zu sein. Implementiert ist es bisher wohl nirgends und MDN weiß auch noch nichts dazu. Zum Thema bedienbares animiertes Dropdown- (oder Flyout-)Menü habe ich nicht viel gefunden, und das, was ich fand, befasste sich mit den Folgen der Animation und nicht mit der Tab-Order. Ob Pickering dazu was brauchbares hat, weiß ich nicht. Möglicherweise steht in Menus was, aber als er mit "Was ist ein Menü und was nicht" anfing und immer weiter darin rumbohrte, habe ich ihm den Vogel gezeigt und bin gegangen. Das muss doch ein gelöstes Standardproblem sein.

Rolf