✨ Add an accordion component#291
Open
chrisjsewell wants to merge 3 commits into
Open
Conversation
An `accordion` directive groups `dropdown`s so that opening one item collapses the others, using the native, JavaScript-free `<details name>` attribute. Only direct child dropdowns join the group (nested dropdowns stay independent), at most one item may start `:open:`, and a `:flush:` flag provides an edge-to-edge variant. `<details name>` is Baseline Newly Available; it degrades gracefully (older browsers keep each item independently collapsible), as documented on the new accordions page.
`nodes.make_id` is lossy (`a/b`, `a-b`, `a.b` all fold to `a-b`) and the serial counter is per-document, so accordions in docnames sharing a slug produced identical `<details name>` values. In a `singlehtml` build these land on one page and their exclusive-open groups coupled together. Append a short SHA-1 digest of the raw docname to the group name so colliding slugs stay distinct; add a singlehtml regression test and make the existing assertions structural rather than digest-hardcoded.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #291 +/- ##
==========================================
- Coverage 92.63% 92.63% -0.01%
==========================================
Files 13 14 +1
Lines 1371 1425 +54
==========================================
+ Hits 1270 1320 +50
- Misses 101 105 +4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
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
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.
Adds an
accordiondirective: a group ofdropdowns where opening one closes the others — with zero JavaScript. The directive stamps a shared, deterministicnameattribute onto its direct child dropdowns'<details>elements, and the browser's native exclusive-open behaviour does the rest.Behaviour
:open:item: a second is stripped from the output with a suppressibledesign.accordionwarning.design.accordion) and are dropped, except inert hyperlink targets, which are kept so:ref:anchors keep working.:flush:renders the group edge-to-edge; custom directives can inheritaccordionviasd_custom_directives(tested).sd-accordion-<slug>-<digest>-<serial>— the digest of the raw docname guards against slug collisions (a/bvsa-b) coupling unrelated groups insinglehtml/concatenated builds, which review caught with a browser-verified reproduction and is now locked in by a dedicated singlehtml test.Browser support
<details name>is Baseline Newly Available (Chrome/Edge 120+, Firefox 130+, Safari 17.2+) — a documented per-feature exception to the support policy: older browsers simply ignore the attribute and render ordinary independently-collapsible dropdowns. Nothing breaks, no JS fallback involved.Verification
main(thedropdown.pyvisitor change is a strict no-op without the attribute)-nW; the CSS artifact regenerated through the generator pipeline (style/accordion.cssregistered inASSEMBLYafterdropdown.css)