Horizontal tab label is "Show" in some themes and in IE11

I was seeing this issue in Firefox on a custom form that implements horizontal tabs via the Field Group element, even after applying the patch in https://www.drupal.org/project/field_group/issues/3145717 .

I can confirm that the attach patch does immediately fix the issue in FF for me, and the code implementation provides a straightforward, readable conditional to handle this edge case.

Using this patch with success on client sites. So committing it to dev :)

Source of file: /field_group/formatters/tabs/horizontal-tabs.js

The horizontal tab labels are showing up as "Hide", "Show", "Show" instead of "Description", "Contact information", etc. I believe I have traced the cause to:
/eps_profile/web/modules/contrib/field_group/formatters/tabs/horizontal-tabs.js
Lines 55 - 57

if (detailsTitle.length) {
var summaryText = detailsTitle.find('> span:last-child').text().trim();
}

The physical structure of the details element in IE 11 is different from any other browser. The span:last-child has the words "Hide" or "Show" inside them. Right next to that span is the phrase we want to insert into the tabs ("Description", "Contact information", "Related notices", etc).

So the solution is to strip out the text from the span, then detect the text( ) of the parent (which now only holds the phrase we need as we have removed the "Hide" or "Show" text) and use that as the tab label. I then put back the "Hide" or "Show" into the span as it may be needed somehow.

if (detailsTitle.length) {
var detailsTitleTxt = $(".details-title span").text();
$(".details-title span").text("");
var summaryText = $(".details-title").text().trim();
$(".details-title span").text(detailsTitleTxt);
}

After reading #7 I found that replacing line 56 does the trick for me.

var summaryText = detailsTitle.find('> :last-child').text().trim();

I replaced it with the following:

var summaryText = detailsTitle.contents().get(2).nodeValue.trim();

However, it is a stopgap solution. Does anyone know how to wrap the text in a span in as intended?

I changed the ticket title and think this should be reopened, or a new ticket opened.

I had a similar problem in all browsers, because the theme has a details.html.twig file and it is being picked up by field_group module and used. This is not surprising because <details> is a valid HTML tag and used to output the tab name inside <details><summary> tags. The workaround for me was to nest a <span> inside the <details><summary>...</summary></details> tags, but the setup is inherently fragile because a "details" template with that markup is foreseeable.

Does anyone know how to wrap the text in a span in as intended?

To apply my workaround, in dev tools, disable JavaScript. On the site, enable twig debugging. Now find the twig template in the theme where the span-wrapped tab title should be, and edit it.