Plugin Directory: FAQ accordion causes page to scroll/jump when opening items due to URL hash update

[raftaar1191]

Steps to Reproduce

1. Visit any plugin page on WordPress.org that has FAQ items, e.g.:
   • ​https://wordpress.org/plugins/theme-check/
   • ​https://wordpress.org/plugins/ollie-menu-designer/
   • ​https://wordpress.org/plugins/galleryberg-gallery-block/

2. Scroll down to the FAQ section.
3. Click on any collapsed FAQ accordion item to expand it.

Expected Behavior

The FAQ accordion item should expand in place without moving the viewport. The page scroll position should remain stable.

Actual Behavior

When a FAQ item is clicked, the browser scrolls/jumps upward. This is caused by the URL being updated with an anchor hash corresponding to the FAQ item's ID (e.g., #why-does-it-flag-something-as-bad%3F). The browser's default anchor-jump behavior then causes the visible page position to flicker/shift, which is disorienting to the user.

This issue is reproducible across multiple plugin pages and appears to affect all FAQ accordion items on the Plugin Directory.

Video of the issue

​https://youtu.be/SNutSPrjPeM

Environment

• Tested on: wordpress.org/plugins/* (multiple plugin pages)
• Browser: Chrome (latest)
• The URL in the address bar updates to include the FAQ anchor on click, triggering native browser scroll-to-anchor behavior.

Suggested Fix

When toggling the FAQ accordion, either:

1. Use history.replaceState() or history.pushState() to update the URL hash without triggering a scroll, or
2. Prevent the default anchor jump by calling e.preventDefault() and/or window.scrollTo() to restore scroll position after the hash change, or
3. Use scroll-behavior: auto temporarily and restore after the hash update.

[dd32]

The FAQ accordion item should expand in place without moving the viewport. The page scroll position should remain stable.

I believe this is partly intentional.

The page is doing a full reload at present on each FAQ click though, which might be causing some issues you're seeing. This is due to an upstream Gutenberg Bug I believe: #8207

[obenland]

This is due to an upstream Gutenberg Bug I believe: #8207

This was fixed when I synced the latest Gutenberg changes 5 days ago but seems to be back now?

[dd32]

Replying to obenland:

This is due to an upstream Gutenberg Bug I believe: #8207

This was fixed when I synced the latest Gutenberg changes 5 days ago but seems to be back now?

I've just disabled Gutenberg 22.7.1 on the network, so using core Trunk only, and it seems to be fixed again now...

(Neither the upstream issue or PR includes the milestone -_-. ​https://github.com/WordPress/gutenberg/issues/76447 ​https://github.com/WordPress/gutenberg/pull/76520 so I'm not sure which version that's in.. I'm pretty sure it's fixed in wp trunk, but broken in gutenberg 22.7.1)

[raftaar1191]

The expected behavior when clicking on an FAQ title should be limited to toggling the visibility of the corresponding answer, without affecting the page scroll position.

The page reload issue appears to be resolved now. However, clicking the FAQ title still triggers anchor navigation, which causes the page to jump (in some cases to the top). This leads to an inconsistent experience when navigating through multiple FAQs.

Ideally:

• The interaction should behave like a standard accordion (expand/collapse in place)
• The scroll position should remain unchanged
• If anchor links are required for accessibility or deep linking, the default navigation should be prevented and handled programmatically

A few reference implementations that demonstrate the expected behavior:

• [​https://getbootstrap.com/docs/5.0/components/accordion/(​https://getbootstrap.com/docs/5.0/components/accordion/) Bootstrap Accordion]
• [​https://www.w3.org/WAI/ARIA/apg/patterns/accordion/(​https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) WAI-ARIA Accordion Pattern]
• [​https://jqueryui.com/accordion/(​https://jqueryui.com/accordion/) jQuery UI Accordion]

All of the above implementations ensure that toggling content does not interfere with the current scroll position and follows accessible interaction patterns.

A more robust approach here would be to use <button> elements for toggling, or explicitly prevent the default anchor behavior to avoid unintended scrolling.

Video Proof:
​https://youtu.be/aZj_PgjPyHA

[nickchomey]

The real issue here is that the FAQs are using antiquated/inappropriate dd and dt elements and jquery. Even worse, it seems like browsers cannot search any text within those elements when they are collapsed.

Instead, they should be <details> and <summary> elements, which have been available on all browsers for over 6 years now. It automatically handles collapsing other details, searchable while collapsed, aria, and anything else that is needed.

If it is truly necessary to give each of them a url (I really dont think it should be), then the WP Interactivty API could be used to do this fairly easily.

Related #8089, #4759

[obenland]

Duplicate of #8089.