Fix tabs label child elements breaking

[hannalaakso]

Using HTML elements inside the tabs label breaks as event.target is looking at the child element instead of the tab label.

This fix checks for the class of the target to allow the event to bubble up to the parent which is the label.

(Looks like this can also be fixed by adding

    & * {
      pointer-events: none;
    }

to

govuk-frontend/src/components/tabs/_tabs.scss

Line 46 in 840d019

but it makes more sense to fix this in JS rather than couple the fix with the stylesheet).

Question: Should we change the public API to accommodate adding markup inside the label by having a text and html option? It seems like it would be useful. At the moment it's not possible to add a test (I don't think) to check for this as you can't add Nunjucks from the example yaml to set | safe, it needs to be done in the template. I've tested this locally by amending one of the full page examples following @fofr's example Nunjucks. Edit: Had a discussion with the team. We currently can't see a user need to make larger changes to the API.

Also created a tech debt issue to look at refactoring the tabs Javascript at some point.

Browser testing:

• Chrome 74
• Firefox 65
• OS Safari 11
• Android Samsung Galaxy (Chrome)
• iOS XS / 8 (Safari)
• Edge 18
• IE 8 - 11

Fixes #1252

[36degrees]

Seems like a great way to fix this issue. I wonder if we should have a test for this? I know when I was looking at this it was difficult, because we don't have a way to pass HTML for tab labels (yet) – but perhaps we could fake it in the tests by injecting an extra element?

[hannalaakso]

Thanks for the review @36degrees 👍 I've added a test where the contents of the tab label are replaced with a DOM element.

[fofr]

Should the click event be on the new <span> element?

[36degrees]

…jinx? 😆

[hannalaakso]

Okay I've added span to the selector. As the span covers the whole label, the test was actually correctly failing without the bubbling fix as the span was always clicked on - whereas adding more text inside the label made the test pass as the span wasn't clicked on anymore. But agree that it's more correct / explicit clicking on the span.

[36degrees]

To test the bubbling, don't we need to click on the span?

[hannalaakso]

See comment above 🙏

[NickColley]

This looks like a tricky one to figure out, nice work. 👍