1. Drop-Down Navigation

Was ist zu tun?

Ein Navigationspunkt, der Unterpunkte hat, muss diese Unterpunkte verbergen und auf Klick öffnen. Das ist die klassische Disclosure Widget Funktionalität: Ein Button aka DW Trigger toggelt den Inhalt aka DW Panel.

Es gibt zwei Varianten:

• Fall 1: Der übergeordnete Navigationspunkt selbst hat ebenfalls Inhalte.
• Fall 2: Der übergeordnete Navigationspunkt selbst hat keine Inhalte.

Im Fall 1 braucht es einen Link und einen Button zum Ausklappen des Panels.
Im Fall 2 braucht es »nur« einen Button zum Ausklappen des Panels.

Was muss logisch passieren?

Wir machen hier mit Fall 2 weiter. Der Navigationspunkt wird zum Button.
(siehe auch Custom ARIA Disclosure Widgets)

<li data-has-children>
  <button class="nav-btn" aria-expanded="false" aria-controls="components-list">
    <span>Components></span>
    <svg>...</svg>
  </button>
  <ul id="components-list" class="level_2 panel">
    <!-- list -->
  </ul>

Brechen wir das nochmal kurz runter:

• <li> ist ein Wrapper für den Button, um diesen nahtlos in die Navigationsliste einzufügen.
  • Das data-has-children-Attribut zeigt an, dass dieser Listenpunkt ein Untermenü (bzw. ein ausklappbares Panel) besitzt.
• <button> - DW-Trigger zum Öffnen und Schließen des Panels
• Trigger-Funktionalität 1: Der Trigger öffnet bzw. schließt das Panel durch Klick auf den Button. Dabei passieren zwei Dinge:
  • Das Panel klappt aus und ein
  • der Status des Panels (expanded oder collapsed) muss kommuniziert werden
• Trigger-Funktionalität 2: Der Trigger öffnet bzw. schließt das Panel mit space und enter Taste: wird durch das native HTML-<button>-Element gewährleistet.
• Die Programmatische Verbindung der Trigger und der zugehörigen Panels muss gewährleistet sein, damit jedes einzelne Panel weiß, wann es ausklappen muss.
• Im <span>-Element steht der Seitenname.
• Ein <svg>-Icon zeigt den Zustand des Panels (offen oder geschlossen) auch optisch an; für Screenreader verstecken.
• <ul> enthält das aus- und einklappbare DW-Panel

Welche ARIA-Attribute brauche ich?

• aria-expanded=["true" | "false" ] für den Button
• Über aria-controls wird der Button mit dem zugehörigen Panel <ul id="component-list"> programmatisch verbunden und dient JavaScript als Referenz.

Welches CSS brauche ich?

• .is-shown für ausgeklappte Panels
• transition für das svg

Welches JavaScript brauche ich?

• CSS-Klasse toggeln für das Öffnen und Schließen des Panels bei Klick auf den Button
• ARIA-Attribut toggeln: aria-expanded, das dem Screenreader kommuniziert, ob das Panel offen oder geschlossen ist.

Was ist zu tun?

...

...

1. Was muss logisch passieren?
2. Welches CSS brauche ich?
3. Wie schreibe ich das JS, Schritt für Schritt, damit die Komponente funktioniert?