WordPress.org
Get WordPress

Making WordPress.org

Opened 5 weeks ago

Last modified 3 weeks ago

#8203 new defect (bug)

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

Reported by: raftaar1191's profile raftaar1191 Owned by:
Milestone: Priority: normal
Component: Plugin Directory Keywords: needs-patch
Cc:

Description

Steps to Reproduce

  1. Visit any plugin page on WordPress.org that has FAQ items, e.g.:
  1. Scroll down to the FAQ section.
  2. 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.

Change History (5)

This ticket was mentioned in ​Slack in #meta by raftaar1191. ​View the logs.
3 weeks ago

#2 @dd32
3 weeks ago

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

#3 follow-up: @obenland
3 weeks ago

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?

#4 in reply to: ↑ 3 @dd32
3 weeks ago

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)

Last edited 3 weeks ago by dd32 (previous) (diff)

#5 @raftaar1191
3 weeks ago

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:

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

Note: See TracTickets for help on using tickets.