und im CSS noch [hidden] { display: none !important }

Würde DAS nun folgendes überflüssig machen?

.flyout-box [aria-expanded="false"] ~ .flyout-content {
		visibility: hidden;
}

Denn was mich momentan ein wenig nervt ist, wenn das Menü zurückslidert, war durch diese CSS Zeile der .flyout-content sofort unsichtbar.

Wie gesagt, dient diese CSS-Zeile eben NUR dazu, das beim TABBEN der .flyout-content NICHT mitgetabbt wird.

Beim schließen des Menüs aber wird .flyout-content sofort unsichtbar.

@Rolf

In folgender CSS-Zeile soll die Klasse .content-visible Wozu dienen?

.flyout-box button.content-visible ~ .flyout-content {
		visibility: visible;
}

Was hattest Du damit vor? Hilft dies bei meinem Problem wenn im JS diese Klasse gesetzt wird? Und wenn ja, wie?

der einsiedelnde