search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

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

Closed ahosgood closed 2 months ago

ahosgood commented 4 months ago

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)

querkmachine commented 4 months ago

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 commented 2 months ago

Closing as a duplicate of #999