Repository navigation
Fit, Results and FAQ #26
Description
Parent
Spec: #20
What to build
The Fit section (who Execile is and is not for), the Results section, and the FAQ.
The FAQ is an exclusive accordion built on <details name="faq"> — opening one closes the others natively, with no JavaScript. Where the name grouping is unsupported, panels simply open independently: it degrades, it never breaks.
FAQ questions carry no heading element. Some browsers give <summary> a button role that strips its children's roles, so a heading inside it is unreliable. The section keeps its own heading. The consequence — FAQ questions absent from a screen reader's heading outline — is accepted, not overlooked.
Results launches in "coming soon" mode. Placeholder case studies must not read as real client outcomes.
The reveal animates via ::details-content; Firefox opens instantly and that is fine.
Acceptance criteria
-
Disclosurerendersdetails/summary; opening one FAQ closes the others with no JavaScript - With
namegrouping unsupported, panels open independently and nothing breaks - No heading element inside
summary; noroleadded todetailsor its panel - The
+/×marker rotates on open, expressed withstylex.when.ancestor— StyleX has no descendant combinators - The reveal animates where
::details-contentis supported and opens instantly where it is not - With reduced motion requested, the accordion does not animate
- Results renders in "coming soon" mode; a flag selects between that and case studies
- Fit renders both the good-fit and not-a-fit lists with distinct markers
- Keyboard: Tab reaches each summary, Enter and Space toggle
- All copy from Messages, with each FAQ carrying a stable slug as its identifier
Blocked by
- Problem, Services and How It Works #24 — Problem, Services and How It Works
Activity
[-]Specialties, Systems and the comparison Table[/-][+]Fit, Results and FAQ[/+]Abuubkar commentedon Sep 5, 2026
Done on branch
ticket/26-faq. Fit, Results and the FAQ accordion.The finding:
when.ancestorneeds the ancestor to opt instylex.when.ancestor('[open]')compiles to:The
.x-default-markerclass is required on the ancestor. Withoutstylex.defaultMarker()applied to the<details>element, the rule is emitted, matches nothing, and the marker silently fails to rotate — no build error, no console warning, no visible sign anything is wrong.Caught only by reading the computed
rotateback out of the browser. "The selector compiled" is not the same as "the rule matches", and this is a good argument for verifying CSS behaviour rather than CSS output. Documented in the component.After the fix:
none→45degon open.Exclusive accordion, zero JavaScript
Six
<details>sharingname="faq". Verified by driving it:[true, false, false, false, false, false][false, false, true, false, false, false]exclusive: true. Opening one closes the others natively.Also verified: no heading inside
<summary>and noroleon<details>or the panel — both #10 decisions, since browsers vary on whethersummarystrips its children's roles.Results ships in "coming soon" mode
Behind an explicit
SHOW_CASE_STUDIES = falseflag with a comment explaining why: Execile has no measured outcomes, and placeholder case studies would read as real ones. The dashed-outline notice says outcomes are published "only once they're measured and approved for sharing".The
[PLACEHOLDER — replace with real client results]string stays inmessages.jsonsopnpm placeholderskeeps reporting it — now 5 placeholders across specialties, services and results.Global CSS
The
::details-contentreveal is inapp.css: StyleX cannot target that pseudo-element, and the property that must transition iscontent-visibility(which the UA sets on the slot), notdisplay. Firefox has no discretecontent-visibilitytransition and opens instantly — accepted in #10, and noted in the CSS.Verified
10 sections,
vp checkpasses on 43 files. CSS 18.41 kB raw / 4.87 kB gzip.Abuubkar commentedon Sep 5, 2026
Done. Exclusive accordion with zero JS. One finding: when.ancestor needs stylex.defaultMarker() on the ancestor or it silently never matches.
Fit, Results and the FAQ accordion