Labels of tabs items, when starting with a `⟨code⟩` snippet, not properly rendered

[dbitouze]

Describe the bug

Context

I have a .rst file containing a tab set with a tab's item, the label of which is starting with a ⟨code⟩ snippet.

Expectation

I expected this ⟨code⟩ snippet to be rendered as <span class="pre">⟨code⟩</span>.

Bug

But instead this ⟨code⟩ snippet is rendered as <literal>⟨code⟩</literal>.

Reproduce the bug

1. Create a minimal Sphinx-doc documentation:

• with the following conf.py file:

  # Configuration file for the Sphinx documentation builder.
  #
  # For the full list of built-in configuration values, see the documentation:
  # https://www.sphinx-doc.org/en/master/usage/configuration.html
  
  # -- Project information -----------------------------------------------------
  # https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
  
  project = 'Test sphinx-design'
  copyright = '2024, Me'
  author = 'Me'
  
  # -- General configuration ---------------------------------------------------
  # https://www.sphinx-doc.org/en/master/usage/configuration.html#general-configuration
  
  extensions = ['sphinx_design']
  
  templates_path = ['_templates']
  exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
  
  # -- Options for HTML output -------------------------------------------------
  # https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
  
  html_theme = 'alabaster'
  html_static_path = ['_static']
  

• and the following test.rst file:

  .. tab-set::
  
      .. tab-item:: foo ``foo``
  
                    ``foo``
  
  .. tab-set::
  
      .. tab-item:: ``foo`` foo
  
                    ``foo``
  
  

2. Run make html.
3. Look at the _build/html/test.html generated file:

• the first tab's item label is okay:

  <label class="sd-tab-label" for="sd-tab-item-0">
  foo <code class="docutils literal notranslate"><span class="pre">foo</span></code>
  </label>
  

• the second tab's item label is not okay:

  <label class="sd-tab-label" for="sd-tab-item-1">
    &lt;literal&gt;foo&lt;/literal&gt; foo
  </label>
  

List your environment

Platform:              linux; (Linux-6.5.13-desktop-6.mga9-x86_64-with-glibc2.36)
Python version:        3.10.11 (main, Apr 16 2023, 03:21:15) [GCC 12.2.1 20230415])
Python implementation: CPython
Sphinx version:        7.2.6
Docutils version:      0.19
Jinja2 version:        3.1.2
Pygments version:      2.16.1

$ pip show sphinx_design
Name: sphinx_design
Version: 0.5.0

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[dbitouze]

Sorry, the ⟨code⟩ snippet is rendered as <literal>⟨code⟩</literal>, not as <literal>⟨code⟩</literal>.

[chrisjsewell]

I tried running your exmple, as part of the test suite, and got:

<section id="heading">
  <h1>
    Heading<a class="headerlink" href="#heading" title="Link to this heading"
      >¶</a
    >
  </h1>
  <div class="sd-tab-set docutils">
    <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">
      foo
      <code class="docutils literal notranslate"
        ><span class="pre">foo</span></code
      ></label
    >
    <div class="sd-tab-content docutils">
      <p>
        <code class="docutils literal notranslate"
          ><span class="pre">foo</span></code
        >
      </p>
    </div>
  </div>
  <div class="sd-tab-set docutils">
    <input
      checked="checked"
      id="sd-tab-item-1"
      name="sd-tab-set-1"
      type="radio"
    />
    <label class="sd-tab-label" for="sd-tab-item-1">
      <code class="docutils literal notranslate"
        ><span class="pre">foo</span></code
      >
      foo</label
    >
    <div class="sd-tab-content docutils">
      <p>
        <code class="docutils literal notranslate"
          ><span class="pre">foo</span></code
        >
      </p>
    </div>
  </div>
</section>

So perhaps this has now been fixed, but feel free to re-open if this still occurs on sphinx-design v0.6.0

[dbitouze]

So perhaps this has now been fixed, but feel free to re-open if this still occurs on sphinx-design v0.6.0

Indeed, looks fixed now, thanks!