Skip to content

feat(accordion): open accordion item from URL hash - #2664

Open
faisalahammad wants to merge 1 commit into
godaddy-wordpress:masterfrom
faisalahammad:fix/2663-accordion-deep-link
Open

feat(accordion): open accordion item from URL hash#2664
faisalahammad wants to merge 1 commit into
godaddy-wordpress:masterfrom
faisalahammad:fix/2663-accordion-deep-link

Conversation

@faisalahammad

Copy link
Copy Markdown

Description

Adds a small client-side helper that opens and scrolls to an accordion item whose title matches window.location.hash on page load. Visiting /page#title-a opens the item titled "Title A" and scrolls it into the viewport.

No saved markup change, no editor change: the existing <details>/<summary> HTML stays byte-for-byte identical. The script is enqueued only on pages that render coblocks/accordion or coblocks/accordion-item via the existing render_block filter in class-coblocks-block-assets.php.

Behaviour:

  • Slugifies the hash (Title Atitle-a, lowercase, non-alphanumeric collapsed to -+).
  • Iterates .wp-block-coblocks-accordion-item__title summaries across all accordions on the page.
  • If exactly one item matches, sets both details.open = true and the open attribute so the native <details> toggle AND the IE polyfill (which observes getAttribute('open')) pick it up, then scrolls it into view.
  • Respects (prefers-reduced-motion: reduce).
  • Zero matches or two-or-more matches → no-op. The collision guard prevents "I deep-linked to one FAQ but it opened two" surprises.
  • decodeURIComponent is wrapped in try/catch so malformed percent-encoding never throws.

Closes #2663

Screenshots

Not applicable — no visible UI change to existing markup.

Types of changes

  • New feature (non-breaking change which adds functionality)

How has this been tested?

Automated:

  • yarn test:js — 23/23 pass on testPathPattern=accordion, including the 10 new jsdom smoke tests (no-hash, bare-hash, single-match, slug-with-punctuation, missing-hash, duplicate-slug guard, reduced-motion, empty-DOM, IE-polyfill attribute set).
  • All existing accordion Jest snapshots unchanged: src/blocks/accordion/test/save.spec.js, src/blocks/accordion/accordion-item/test/save.spec.js, src/blocks/accordion/test/transforms.spec.js.

Manual (see TESTING_INSTRUCTIONS.md in the branch):

  1. Create a page with an Accordion block, items titled "Title A", "Title B", "Title C".
  2. Visit /page#title-b — item B opens and the page scrolls so its summary is at viewport top.
  3. Visit /page#bogus — nothing changes, no console errors.
  4. Make two items share a title, visit the slugsified hash — neither opens (collision guard).
  5. Enable OS reduce-motion — scroll becomes instant.
  6. View page source on a page without an accordion block — no coblocks-accordion-script.js script tag.

Acceptance criteria

User can deep-link to a specific accordion item by appending the slugified title to the URL hash, and the item opens and scrolls into view on load. No regression to existing accordion behaviour or saved markup.

Checklist:

  • My code is tested
  • My code follows accessibility standards
  • My code has proper inline documentation
  • I've included any necessary tests
  • I've added proper labels to this pull request

Adds a frontend script that reads window.location.hash on page load,
slugifies the hash and each accordion item's summary title, then
opens and scrolls into view the single matching item.

- src/js/coblocks-accordion-script.js: hash-driven open + scroll
- src/js/test/coblocks-accordion-script.spec.js: jsdom smoke tests
- webpack.config.js: add entry for the new script
- includes/class-coblocks-block-assets.php: register + conditional
  enqueue via render_block filter

Script only loads on pages that render coblocks/accordion or
coblocks/accordion-item. Ambiguous matches (0 or 2+) are
safely ignored. Works with the native details toggle path and
the existing IE polyfill.

Fixes godaddy-wordpress#2663
@faisalahammad
faisalahammad force-pushed the fix/2663-accordion-deep-link branch from 8f4130b to 1b16716 Compare July 30, 2026 10:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A direct link to open each item of the accordion

1 participant