search

WordPress / wordpress.org

WordPress.org Meta, Git-ified. Synced from git://meta.git.wordpress.org/ This repository is just a mirror of the WordPress Meta subversion repository. Please include a link to a pre-existing ticket on https://meta.trac.wordpress.org/ with every pull request.
https://meta.trac.wordpress.org/
109 stars 140 forks source link

Plugins: FAQ: Restore anchors to FAQ items #315

Open dd32 opened 4 months ago

dd32 commented 4 months ago

The FAQ anchors have ceased to update the URI, this PR attempts to add it back.

TODO: The scrollTo functionality doesn't work, it triggers, but it's like some other JS from something else forces a scroll to the top of the page instantly.

@StevenDufresne Do you wish to take this over?

StevenDufresne commented 4 months ago

This is working for me?

https://d.pr/i/lSTkLy

ryelle commented 4 months ago

The URL update is working if you click the button, but not elsewhere in the dt, despite anywhere in the dt opening the question.

Screenshot 2024-05-10 at 3 08 36 PM

I also see an issue with some questions working while others don't, and I wonder if it has to do with punctuation (apostrophes in particular)— "Q: Can I customize the booking calendar colors?" works, but "Q: The booking calendar form doesn’t appear. Solution?" does not.

Removing the action from the button will likely break the keyboard functionality here. Also, it looks like this also needs focus states.

dd32 commented 4 months ago

The URL update is working if you click the button

Ahhhh, yeah I've never clicked the button.. always the h3 or dt.

Removing the action from the button will likely break the keyboard functionality here.

I've tested it, and keyboard appears to still work fine.

The formaction is missing the leading # so it's currently reliant upon the JS click handler to work.

The FAQ items also have zero focus state for keyboard navigation, so it's impossible to tell which element the keyboard is focused on right now.

I also see an issue with some questions working while others don't, and I wonder if it has to do with punctuation (apostrophes in particular)

Yep, that's caused by ' in the question. Javascript EncodeURI() and EncodeURIComponent both never encode -.!~*'() characters, but PHP does. These characters are "unreserved marks" that can be used in URLs unencoded without concern, but PHP encodes them for good measure.

That causes the following line to never find an element, since ' != %27 https://github.com/WordPress/wordpress.org/blob/99515ac7bc63c95b5de966cc6db45d42f456aee4/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/js/section-faq.js#L41

This includes a JS function for RFC3986 encoding, which would encode those characters, but that also doesn't encode[] which PHP still does for the before-mentioned functions. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986

13a34181a6fe5f818fe2c6de0413b775a01bd9f9 should resolve that.. even if it looks a bit complicated..