tab-item option :name: should end up in the rendered HTML

[drammock]

Describe the bug

context
I want to run a little JS function to detect user platform, and select/display the tab in a tab group that matches their platform. It's hard to target those tabs cleanly. I tried specifying a :name: for my different tab items, but the specified names don't appear anywhere in the resulting HTML (I think instead they're written as rST anchor names/targets?).

Here's a simplified tab-set output (I've replaced the long hash strings with HASH-NNNN to make it easier to see what matches what):

<div class="sd-tab-set docutils">
<input checked="checked" id="HASH-1111" name="HASH-0000" type="radio">
<label class="sd-tab-label" for="HASH-1111">Linux</label>
<div class="sd-tab-content docutils">
<p>text for Linux users</p>
</div>
<input id="HASH-2222" name="HASH-0000" type="radio">
<label class="sd-tab-label" for="HASH-2222">macOS</label>
<div class="sd-tab-content docutils">
<p>text for Mac users</p>
</div>
<input id="HASH-3333" name="HASH-0000" type="radio">
<label class="sd-tab-label" for="HASH-3333">Windows</label>
<div class="sd-tab-content docutils">
<p>text for Windows users</p>
</div>
</div>

related: #30 proposed to add HASH-1111, HASH-2222, and HASH-3333 to the respective .sd-tab-content-classed divs. That would be helpful; to my mind even more helpful would be to actually use the :name: value set in the rST code as the id attribute of the input tag and as the for attribute of the label tag. This would allow one to directly target know which input node to target in order to activate the desired tab.

expectation

1. I expected :name: to show up in the rendered HTML somewhere (ideally on the input node).
2. I expected it to be easier to target the tabs with JS 🙂

bug

1. whatever I specify for :name: is not in the rendered HTML
2. targeting a desired tab with JS requires a circuitous process of:
   1. parse the label node's textContent to find the right tab
   2. read its for attribute
   3. use that to find the correct input node

problem
This is a problem for people who want their site to auto-select the tab based on the viewer's platform.

Reproduce the bug

.. tab-set::

    .. tab-item:: Linux
        :name: foo

        some Linux content.

    .. tab-item:: macOS
        :name: bar

        some macOS content.

    .. tab-item:: Windows
        :name: baz

        some Windows content.

foo, bar, and baz will not show up in the rendered HTML

List your environment

not using jupyter-book. Sphinx-design is pulled in by pydata-sphinx-theme.

$ mamba list sphinx
jupyter_sphinx            0.3.2           py310hff52083_0    conda-forge
pydata-sphinx-theme       0.8.1                    pypi_0    pypi
sphinx                    4.5.0              pyh6c4a22f_0    conda-forge
sphinx-autobuild          2021.3.14          pyhd8ed1ab_0    conda-forge
sphinx-copybutton         0.5.0                    pypi_0    pypi
sphinx-design             0.1.0              pyhd8ed1ab_0    conda-forge
sphinx-gallery            0.11.0.dev0               dev_0    <develop>
sphinx-sitemap            2.2.0              pyhd8ed1ab_0    conda-forge
sphinx-theme-builder      0.2.0a14           pyhd8ed1ab_0    conda-forge
sphinxcontrib-applehelp   1.0.2                      py_0    conda-forge
sphinxcontrib-bibtex      2.4.2              pyhd8ed1ab_0    conda-forge
sphinxcontrib-devhelp     1.0.2                      py_0    conda-forge
sphinxcontrib-htmlhelp    2.0.0              pyhd8ed1ab_0    conda-forge
sphinxcontrib-jsmath      1.0.1                      py_0    conda-forge
sphinxcontrib-qthelp      1.0.3                      py_0    conda-forge
sphinxcontrib-serializinghtml 1.1.5              pyhd8ed1ab_2    conda-forge
sphinxext-rediraffe       0.2.7              pyhd8ed1ab_0    conda-forge

[drammock]

Hi, I'm finally coming back to this, and I don't think it's actually fixed. After #91 the value set for :name: in the rST is getting set in the HTML as the id attribute... of the label nodes. Not of the input nodes. Here's some HTML copy-pasted from my browser console for one of the tabs in a tabset:

<input checked="checked" id="sd-tab-item-0" name="sd-tab-set-0" type="radio">
<label class="sd-tab-label" for="sd-tab-item-0" id="linux">
Linux</label>

Note how the input node has a generic id (no longer a long hash string, but not identifiable as "the linux tab" either). The task described in this issue was essentially to do

some_input_node.checked = true;

without having to figure out which input node was the correct one by first parsing all the label nodes. So item 1 of the bug section in the OP is addressed, but not item 2. Re-open?