Child elements in a tab label break when clicked

[fofr]

In the Tabs component, if you include HTML within a tab label – eg an abbreviation tag. When you try and click that element the javascript events don’t bubble up correctly and the component breaks.

It's probably this line causing it:
https://github.com/alphagov/govuk-frontend/blob/master/src/components/tabs/tabs.js#L172

Example nunJucks:

{{ govukTabs({
    items: [
      {
        label: 'Tab with child element, eg <strong>strong</strong>' | safe,
        id: "first",
        panel: {
          html: 'First tab'
        }
      },
      {
        label: 'Normal tab',
        id: "second",
        panel: {
          html: 'Second tab'
        }
      }
    ]
  }) }}

<li class="govuk-tabs__list-item">
  <a class="govuk-tabs__tab govuk-tabs__tab--selected" href="#first">
    Tab with child element, eg <strong>strong</strong>
  </a>
</li>