Tabs are not functional when CSS is loaded but JavaScript is not

[ahosgood]

Description of the issue

The tabs component work perfectly with JavaScript and CSS enabled.

If CSS is disabled then the tabs revert to just a list of links and headings which also works fine.

When JavaScript is disabled (or fails to load) but CSS does load then the tabs are non-functional - I can't get to tabs other than the initial one.

Steps to reproduce the issue

I tested this with https://design-system.service.gov.uk/components/tabs/default/ in Chrome by blocking all network requests to *.js.

Actual vs expected behaviour

It would probably be preferable that the tabs component continue to work when CSS is available and JavaScript is not.

Environment (where applicable)

• Browser/OS: Latest Chrome on Mac OS (although this applies to all browser/OS combinations)
• GOV.UK Frontend Version: 5.4.0

[querkmachine]

This isn't a case of JavaScript being disabled, but rather that some JavaScript is being ran whilst other JavaScript is not, due to the blocked network requests.

There is a line of JS embedded in the template that tests early on if JavaScript modules are supported and, if so, adds a class to the root that activates additional styles on various components, on the assumption that the component JS will follow later on. https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/template.njk#L29

In the event that those further JS requests fail, are blocked or missing, these components will 'fail unsafe', as described in #999.

We do the module support check up-front for performance reasons. Otherwise the page's content will be rendered, then the check will occur and cause the page's content to be re-rendered. By doing the check up-front, the page only has to render once.

It's something we do want to resolve, but it's not easy without compromising on performance and subsequently web vitals score.

[romaricpascal]

Closing as a duplicate of #999