Open tab when its `:name:` is used in URL

[cjsha]

Context

For example if I have:

..  tab-set::

  ..  tab-item:: YES!
        :name: yes

        Content shown when user click the "YES!" tab.

  ..  tab-item:: NO!
        :name: no

        Content shown when user click the "NO!" tab.

Inputting https://org-name.github.io/docs-site/question.html#no opens the page to the location of the tab-set, but does not open the corresponding tab.

Proposal

I propose inputting https://org-name.github.io/docs-site/question.html#no opens the page to the location of the tab-set and opens the corresponding tab.

I understand this can be done with the :sync: & key fields using a URL query, but this particular page that I'm working on only has one set of dropdowns so it doesn't make much sense to add a sync parameter. Moreover, I think it's easier to construct URLs with a simple # instead of a query (here I'm thinking about my colleagues when they need to link someone to a page with tabs). I think the :name: field would more useful if not only linked to where the tab-set is, but also opened the corresponding tab.

This seems to require changes to the ready() function. For example, add

  if (window.location.hash) {
    const hash = window.location.hash.substring(1); // Remove '#'
    const tabButton = document.querySelector(`.sd-tab-label[id="${hash}"]`);
    if (tabButton) { tabButton.click(); }
  }

after line 34.

It would also be awesome to have a function to update the hash whenever a tab is clicked. For example, add

    label.addEventListener('click', function() {window.location.hash = this.getAttribute('id');})

after line 37 of sphinx_design.js

This code is untested, I'm not sure this works. But I think this is how it would be done

Tasks and updates

No response