Add experimental NativeAccordion (LV JS, no Zag) - #134
Draft
karim-semmoud wants to merge 15 commits into
Draft
Conversation
Introduce Corex.NativeAccordion with the same accordion anatomy and Design CSS scope, driven by LiveView JS command pipes and controlled assigns. Includes an e2e playground plus LiveViewTest coverage (no Wallaby). Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Mirror Accordion doc pages (playground, anatomy, api, events, patterns, style), move controlled demos to Patterns, reshape playground to a single canvas with orientation controls, and fix ArrowUp via on_keydown + focus pin with orientation/RTL-aware arrow mapping. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Register native_accordion in component_wire and HEEx-only splits, alias it to accordion CSS, ignore JS.t opaque dialyzer contracts, and allow LV-only on_value_change / on_keydown without client counterparts. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Split complex State helpers, normalize LV param keys once, flatten JS toggle nesting, and use static ~S/~W sigils in tests so MIX_ENV=test mix lint exits clean. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Add DocA11yRoutes and a DocComponentWallaby suite so DocPageMatrix entries satisfy DocDemoCoveragePolicyTest without a custom pilot Wallaby module. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Compile neighbor JS.focus onto triggers and window-keydown keymap on the root so arrows work without handle_event. Default to uncontrolled, drop the focus pin, and uniquify region landmark names for axe. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Call Phoenix.LiveView.JS.exec/3 from HEEx with a JS struct as the first argument and a native :focus selector so keyboard nav stays client-only. Drop exec_nav, Keymap, and Trigger modules. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Keep the 3-arg :focus[data-nav-*] encoding check on the playground LiveView HTML, and run axe on native-accordion doc pages so unique region landmarks stay covered. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
LiveView phx-window-keydown does not preventDefault, so Arrow/Home/End still scrolled the page. Cancel those keys on the focused trigger. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Client toggle_item only opened/closed via toggle_attr, so the playground Collapsible switch had no effect. Non-collapsible mode now opens without toggling closed, and the playground resets open values when multiple/collapsible change. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Integration phx_new matrix failed once on mix deps.get (repo.hex.pm closed); unrelated to NativeAccordion changes. Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
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
2 participants
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.
Summary
Experimental
Corex.NativeAccordion(LV JS pipes, no Zag) plus full doc surface mirroring Accordion (minus animation).Component
data-scope="accordion"anatomy / Design CSShandle_toggle/4JS.exec/3:JS.exec(%JS{}, "data-nav-*", to: ":focus[data-nav-*]")onphx-window-keydown, with neighborJS.focusstored on each trigger. Nohandle_event, no hook, no JS filepreventDefaultArrow/Home/End so the page does not scroll while moving focuscollapsible: falseopens withouttoggle_attr(open item cannot close); playground Collapsible / Multiple switches reset open values like Accordionrole="region"landmark names (aria-labelledbytrigger + hidden accordion id label) so axelandmark-uniquepasses with repeated demo copyDocs (e2e)
Tests / CI
preventDefault, non-collapsible click encoding, and 3-argJS.execDemo
native_accordion_collapsible_playground_demo.mp4
Collapsible off leaves a single open item
Clicking the open item does not close it when collapsible is off
Clicking another item opens it and closes the previous
Collapsible on allows closing the open item
To show artifacts inline, enable in settings.