Vertical tab labels are empty, on Drupal 11.2

After pushing the changes for 📌 Make the grey color used as background on /admin/modules slightly darker Active , the vertical tab labels are rendered again as they should.

I'm re-opening this issue, because I could reproduce it on D11 (2.x latest). Also, the issue seems to be not related to css, but it is because the details template outputs whitespace characters that are then picked up by core's vertical-tabs.js as the title (so basically the title becomes a new line character and six spaces).

I'm commiting the fix that I think would solve the issue soon.

I opened an MR with the fix, my proposal is to remove the span wrapper and make sure to not output whitespace around the title in the summary element (so the text node becomes first child). This is the same output that the Claro theme is using, where the issue is not present.

Apparently, this same fix (removing the span and whitespace) is already committed in another issue: https://www.drupal.org/project/seven/issues/3115222 📌 Explore if Seven's underline focus style for details/summary can work without span Active

So I guess this can be closed again.

I was confused, because in #3 a different issue was linked as something that would fix the vertical tabs labels. Anyway, I think it's good that the reason for this issue is documented like this.

I could reproduce it too on a DDEV instance running Drupal 11.2.1 I created to test this issue.

📌 Explore if Seven's underline focus style for details/summary can work without span Active aims to test if the <span> element could be removed and still be able to underline the summary text. I created the issue fork just to test if it is possible, but that merge request would not be committed.

Just a note to be clear: this issue is only because of the whitespace in the output. The presence of the span element is not related, I just removed it in the MR because I thought it's not necessary. Simply removing the whitespace in the summary element (and keeping the span) would also fix the problem.

This would also work:

<summary{{ summary_attributes.addClass(summary_classes) }}><span>{{ title }}</span></summary>

I tested the change on my DDEV instance, and it worked.
I will leave for a follow-up issue the changes to the CSS styles for <details> elements.

Yes, it would work when all the content of <summary> is on a single line.

<summary{{ summary_attributes.addClass(summary_classes) }}><span>{{- title -}}</span></summary>

With the following markup, I still get the issue.

<summary{{ summary_attributes.addClass(summary_classes) }}>
  <span>{{- title -}}</span>
</summary>

With the following markup, the issue is gone.

<summary{{ summary_attributes.addClass(summary_classes) }}>
  {{- title -}}
</summary>

I prefer to use the latter markup.

Yes, in the 2nd example the whitespace is only removed from around the title inside the span, but whitespace is still there around the span, and that's causing the problem.

I also agree that the last markup is the nicest.

Also, even when keeping the span (1st example), core's js will remove it anyway, as it reads out the text content of the span in that case that is appended after that in a strong element. So the span is removed after all, even if it would be kept in the template markup.

Automatically closed - issue fixed for 2 weeks with no activity.