[FIR-295] Add the ff-accordion pattern composing ff-panel - #63
Merged
Conversation
Defines the ff-accordion pattern contract (composes ff-panel and ff-icon only): sections/mode/expandedIds API, the toggle-button + role=region behavior clauses, and the roving-header keyboard model. Wires it into ALL_CONTRACTS (23 primitives + 7 patterns) and updates the structural inventory spec.
Adds FfAccordionComponent: stacked disclosure sections composing ff-panel (header zone hosts the toggle button, body zone hosts the region) and ff-icon (chevron). Single/multiple expansion is fully controlled via expandedIds/expandedIdsChange, mirroring ff-tab-bar's activeId contract. Section bodies are arbitrary templates matched by id through the new [ffAccordionSection] structural directive, the same idiom ff-data-table uses for its cell templates. A ff-accordion + ff-accordion-item pair (child components registering into a parent, like mat-accordion or ng-hub-ui-panels' hub-panel/ hub-panels) was considered and rejected: every existing pattern in this library (ff-tab-bar, ff-data-table, ff-list, ff-menu-button) is a single top-level component with metadata inputs and, where content is arbitrary, matching structural template directives — never a container/child component pair. A single ff-accordion composing ff-panel keeps that convention, gives the contract package one selector to track instead of two, and needs no DI wiring between a container and its children. Accessibility: each header is a native <button id> with aria-expanded and aria-controls; each body is role="region" with aria-labelledby, marked inert while collapsed so its content is unreachable by pointer, keyboard and assistive technology until expanded. Keyboard: ArrowDown/ ArrowUp/Home/End rove focus across enabled headers (Enter/Space toggle via native button semantics), reusing ff-tab-bar's roving-tabindex querySelectorAll approach. The collapse animates a CSS grid-template-rows track (0fr/1fr) rather than measuring pixel heights in script, and the transition (plus the chevron rotation) is dropped entirely under prefers-reduced-motion: reduce, the same media query ff-skeleton uses for its shimmer. Exports FfAccordionComponent, FfAccordionSectionTemplateDirective and the FfAccordionMode/FfAccordionSection/FfAccordionSectionTemplateContext types from the package's public index.
New /patterns/accordion route demonstrating single mode (default, expanding a section closes the previously open one), multiple mode (sections expand independently) and a disabled section, following the existing DemoSection idiom used by the tab-bar page. Registers the route in app.routes.ts and the entry in PATTERN_COMPONENTS so the shell sidebar and the patterns index pick it up automatically; updates the patterns index page's "Three patterns" copy to "Four".
Adds Unreleased entries to design-system and design-system-contract changelogs for the new ff-accordion pattern and its contract.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Delivers the accordion visualization (FIR-295, FF-CAT-04) as a new pattern,
ff-accordion, composingff-panel+ff-icon— the primitive stays untouched, the composition-hierarchy rule holds (contractcomposesverified, ALL_CONTRACTS now 23 primitives + 7 patterns).sections: FfAccordionSection[]+[ffAccordionSection]template directive; controlledmode: single|multiplewithexpandedIds/expandedIdsChange(likeff-tab-bar's activeId).aria-expanded/aria-controls; body isrole=region+aria-labelledbyand goesinertwhile collapsed; Arrow/Home/End keyboard skips disabled; toggle guarantees a ≥44px tap target.grid-template-rows0fr/1fr, no JS measurement), dropped underprefers-reduced-motion.AccordionContract, catalog page at/patterns/accordion, and both packages'[Unreleased]changelogs updated.Structural decision (pattern vs growing ff-panel) recorded in the implementation commit body.
How to verify
pnpm nx test design-system— 641/641 (13 new accordion specs: single/multiple semantics, disabled, keyboard, projection)pnpm nx serve playground --port 4312→ /patterns/accordionTraceability
Board ticket without owning PASO: key in branch and commit subjects.