Improve the settings pages tabs location hash mechanism

[afercia]

Problem

In the settings pages, clicking on the page "tabs" uses a mechanism based on the location hash to determine which the active tab is, and which Help Center video needs to be delivered.

Over time, this mechanism has proven to be fragile and produce bugs. Also, it messes up with the browser history, creating history entries that don't do anything.

More details

See for example a few previous related issues: #12937, #4117, and #3101

When clicking on the tabs, a "double hash" URL fragment identifier gets added to the URL, for example:

• #top#dashboard
• #top#features
• etc.

Besides the fact a double hash seems to me non-standard, it conflicts with real "same page links". For example, the WordPress skip links #wpbody-content and #wp-toolbar and potentially with any other link to a page fragment.

In #12937 it is explained how this made the Help Center video disappear when following the WordPress skip links.

Using the location hash to determine which tab is active seems inherently fragile, as anything could change the URL hash in ways Yoast SEO doesn't understand.

Browsers history

Also, this breaks browsers history. When clicking on the tabs, many history entries are created:

However, clicking the browser "Back" button doesn't trigger navigation through the tabs (and I'd tend to think it shouldn't [Edit August 2019: I'm having second thoughts on this]). It does change the video in the Help Center, but the active tab doesn't change. For example, users may end up with being in the "Search Appearance – Archives" tab and see the "Search Appearance – Taxonomies" video.

I'd tend to think these entries shouldn't be created, as they're confusing for users. Tabs just toggle the visibility of in-page content, they're not meant to trigger navigation. Also, breaking native browsers features doesn't seem ideal in the first place.

Proposal

Explore using URL query parameters instead of hash values.

[afercia]

To better test the browsers history issue:

• go to SEO > General
• click repeatedly the “tabs” at the top: Dashboard - Features - Webmaster Tools
• the location hash changes and the browser registers these changes in its history

• notice that the document title is always the same
• however, clicking the browser “Back” button (and then the “Forward” one) does nothing

I'd tend to think that, whether we change the URL fragment identifier or we use query parameters, we shouldn't break the browsers history and implement a simple JS-powered "routing" system and also update the document title accordingly.