Plugins: FAQ: Restore anchors to FAQ items

[dd32]

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]

This is working for me?

https://d.pr/i/lSTkLy

[ryelle]

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

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]

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

wordpress.org/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/js/section-faq.js

Line 41 in 99515ac

document.getElementById( encodeURIComponent( decodeURIComponent( window.location.hash.substr(1) ).trim() ) )

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

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