SOLCOM Navigation: Dropdown-Erweiterung — WAI-ARIA Disclosure Navigation (WCAG 2.1 AA)
<button aria-expanded>-Toggles (WAI-ARIA Disclosure Navigation Pattern). 2 Ebenen max, WCAG 2.1 AA, Mobile als Accordion im Hamburger-Overlay. Sub-Items rendern via .solcom-nav-sub-link mit CSS-Arrow. Nur Dark-Variante.
Kontext
ADR-0008 hat menu--main.html.twig explizit als Single-Level-Template implementiert. Der Kommentar lautete: „Submenus are not modelled in the SOLCOM Figma — the template is single-level on purpose."
Das neue Figma-Design für P2503-84 (figma.com/design/CHHDfbpX8Ys2LBiGs5HVK0, Node 61148:47024 „Navigation >1280" + Mobile-Frames) zeigt eindeutig Dropdown-Flyouts:
- 4 Top-Level-Items mit Chevron: „Für Unternehmen", „Für Freiberufler", „Über SOLCOM", „Karriere bei SOLCOM"
- Clicked-State öffnet ein Flyout-Panel mit flachen Pfeil-Links (5 Sub-Items als Placeholder)
- Dark-Variante (navy BG
--brand-bg-blue, Lime-Text) und Light-Variante (ivory BG, Dark-Blue-Text) — Light ist aus Projekt-Sicht Out of Scope - Mobile-Prototyp zeigt Accordion-Expansion innerhalb des Hamburger-Overlays
Eine Grilling-Session am 2026-05-13 hat alle Architekturentscheidungen für P2503-84 systematisch geklärt. Dieses ADR dokumentiert die Ergebnisse.
accepted — das Navbar-SDC-Schema (logo/navigation/links-Slots), .solcom-btn-link-Reuse, links-Slot mit Account-Menü und Sprachschalter sowie die Kernel-Tests in HeaderTemplatesTest.php bleiben unverändert gültig. Nur der Single-Level-Constraint wird durch dieses ADR aufgehoben.Entscheidung
WAI-ARIA Disclosure Navigation Pattern als einziges Dropdown-Pattern für die SOLCOM-Hauptnavigation. Konkret:
- Single-Level-Constraint aufgehoben.
menu--main.html.twigwird umitem.below-Rendering erweitert. Maximale Tiefe: 2 Ebenen. 3. Ebene ist explizit nicht supportiert und wird im Template ignoriert. - Top-Level-Items mit Kindern =
<button aria-expanded>. Kein<a>-Tag, keine eigene URL. Klick togglet das Flyout-Panel. Top-Level-Items ohne Kinder bleiben<a class="solcom-btn-link">. - Flyout-Panel: Absolut positioniertes
<ul>(white BG, Rounded Corners, Shadow) unterhalb des Parent-Buttons. Sichtbarkeit viaaria-expanded-gesteuerter CSS-Klasse. - WCAG 2.1 AA — Pflicht-Kriterien:
aria-expanded="true/false"auf dem Toggle-Buttonaria-controls="[panel-id]"auf dem Toggle-Button,idauf dem Panel- Keyboard: Enter/Space öffnet/schließt, Escape schließt + Focus-Return auf Trigger, Tab/Shift-Tab traversiert geöffnete Sub-Items
- Click-outside schließt offene Panels
aria-current="page"auf dem aktiven Sub-<a>-Link (nicht auf dem Parent-Button)
- Mobile (Hamburger-Overlay): Accordion-Pattern. Gleiche ARIA-Mechanik wie Desktop (
aria-expanded-Button), aber kein absolut positioniertes Flyout — Sub-Items klappen inline im Flow auf.navbar.jswird um den Accordion-Toggle erweitert. - Sub-Item CSS:
.solcom-nav-sub-link. Neue CSS-Klasse insrc/main.cssmit::before-Lime-Arrow (analog zu.solcom-btn-link). Drupal-Menü-Semantik (in_active_trail,item.attributes) bleibt vollständig erhalten — keinbyte_theme:button-link-Include. - Active-Trail auf Parent-Button:
solcom-btn-link--active-trail-Modifier auch auf dem Toggle-Button, wennitem.in_active_trailtrue. Konsistent mit dem bestehenden Underline-Pattern aus ADR-0008. - Nur Dark-Variante. Light-Variante (ivory BG) ist Out of Scope — kein neuer Color-Prop am Navbar-SDC-Schema.
- Kernel-Tests erweitern.
HeaderTemplatesTest.phpbekommt neue Tests:aria-expanded-Contract, Sub-Item-Arrow-Class,aria-current="page"auf aktivem Sub-Link, keine 3. Ebene rendered.
Rejected alternatives
Expand each rejected option to see the rationale.
Light-Variante (ivory BG) jetzt implementieren rejected
Light-Variante ist Out of Scope für P2503-84. Kein konkreter Anwendungsfall mit Figma-Spec bekannt. Ein neuer Color-Prop am Navbar-SDC-Schema würde Canvas-Config-Overhead erzeugen, ohne aktuellen Mehrwert. Bei Bedarf eigener ADR.
3-Ebenen-Navigation (nested Dropdowns) rejected
Das Figma zeigt ausschließlich 2 Ebenen. Der Macbook-Screenshot zeigt eine flache Flyout-Liste ohne Sub-Kategorien. 3. Ebene wäre rekursives Twig oder separates Template-Include — deutlich mehr Komplexität ohne Figma-Grundlage. Bei Bedarf neuer ADR.
<details>/<summary> als Disclosure-Mechanismus rejected
Natives HTML, kein JS nötig — aber: <details> schließt nicht automatisch bei Klick außerhalb des Elements. Das ist Standard-UX für Dropdowns und WCAG-erwartet. Außerdem eingeschränkte Animierbarkeit für Open/Close-Transitions. navbar.js hat bereits einen Toggle-Mechanismus (Hamburger) — den zu erweitern ist konsistenter als zwei parallele Mechanismen.
Split-Button (Link + separater Toggle-Button) für Top-Level-Items rejected
Zwei Interaktionspunkte pro Top-Level-Item erhöhen die kognitive Last und sind ein bekanntes Antipattern (WCAG 2.5.3: Label in Name). Das Figma zeigt keine separaten Parent-URLs für Dropdown-Items — Parent-Items sind reine Strukturgeber. Option A (reiner Toggle-Button) ist sauberer.
Separates Slide-in-Panel für Mobile (statt Accordion) rejected
Der Figma-Prototyp (Node 61232:65907 „Mobile Nav - Prototyp") zeigt Accordion-Expansion im bestehenden Overlay — kein neues Panel. Slide-in-Panel erfordert zusätzlichen JS-Overhead und würde den bestehenden Hamburger-Mechanismus komplexer machen, ohne Figma-Grundlage.
byte_theme:button-link-Include für Sub-Items rejected
Bereits in ADR-0008 für Top-Level-Items abgelehnt — gleiche Begründung gilt für Sub-Items: byte_theme:button-link kennt keine Drupal-Menü-Semantik (in_active_trail, item.attributes). Direkter Klassen-Reuse via .solcom-nav-sub-link (CSS-Only, ::before-Arrow) ist besser. Kein SDC-Include-Overhead.
ARIA Menubar Pattern (role="menubar", Arrow-Key-Navigation) rejected
Das WAI-ARIA Menubar-Pattern ist für Application-Menus gedacht (Datei → Speichern), nicht für Website-Navigation. Es erfordert komplexe Arrow-Key-Behandlung (→/← wechselt Top-Level-Items, ↓/↑ navigiert Sub-Items) und ist für Screen-Reader-Nutzer weniger intuitiv auf Navigation-Sites als das einfachere Disclosure-Pattern. WAI-ARIA Authoring Practices Guide empfiehlt Disclosure Navigation für Site-Navs ausdrücklich.
Consequences
menu--main.html.twigmuss erweitert werden.item.below-Loop für Sub-Items hinzufügen. Top-Level: conditional aufitem.below— wenn Kinder vorhanden,<button aria-expanded>statt<a>. Sub-Items:<a class="solcom-nav-sub-link">mitaria-current="page"wennitem.in_active_trail.navbar.jsmuss erweitert werden. Bestehender Hamburger-Toggle bleibt. Neu: Dropdown-Toggle (click aufaria-expanded-Buttons), Click-outside-close, Escape-close mit Focus-Return, Mobile-Accordion-Expansion..solcom-nav-sub-linkinsrc/main.css. Neue Klasse neben.solcom-btn-link. Dark-Context: Lime-Text,::before-Arrow (Lime), Hover-State. Kein Token-Drift — eigene Klasse wegen Arrow-Differenzierung zu Top-Level-Items (die kein Arrow haben, per ADR-0008).HeaderTemplatesTest.phperweitern. Neue Kernel-Tests:aria-expanded-Attribut auf Toggle-Buttons, kein<a>für Items mit Kindern,.solcom-nav-sub-link-Klasse auf Sub-Items,aria-current="page"auf aktivem Sub-Link, kein Rendering der 3. Ebene.- ADR-0008 bleibt
accepted— erhält Verweisextended-by: ADR-0027. Navbar-SDC-Schema, Account-Menü, Sprachschalter, Logo-Styling bleiben unverändert. - Menü-Inhalt (Drupal-Menü-Items) bleibt Content-Aufgabe. Die Top-Level-Menü-Items und ihre Sub-Items müssen unter
/admin/structure/menu/manage/mainmit korrekter Hierarchie eingepflegt werden — das ist nicht Bestandteil dieses ADR. - Light-Variante, 3. Ebene, Footer, URL-Konventionen sind explizit nicht Bestandteil von P2503-84 und erfordern jeweils eigene ADRs bei Bedarf.