Components failing initialisation break due to `.js-enabled` styles

It is possible for components to be in a completely broken state if the user has JavaScript enabled but the GOV.UK Frontend bundle fails to download.

Previously we detected the presence of GOV.UK globally on window, but we removed this since we could not be sure if people would be using bundlers which will not output a global.

https://github.com/alphagov/govuk_template/blob/master/source/views/layouts/govuk_template.html.erb#L113

We could consider, injecting a global whenever a component is loaded that can remove js-enabled.

Potentially something like:

if (not already injected) {
   window.___GOVUKFrontendComponentInitialised___
}

// tabs.js
import 'inject-global-initialised'
// only injects if not already injected before
inject()

// rest of tabs code here

// template.njk

<script>if(!window.___GOVUKFrontendComponentInitialised___) { // remove js-enabled }</script>
</body>

https://trello.com/c/oRDkiAz9/1448-frontend-components-appeared-styled-when-js-blocked

[edwardhorsford]

We had a similar issue in my service this week. For reasons our service’s js file for IE failed to compile so our service’s js wasn’t available in IE - but we still had the js-enabled class. This caused the worst of both worlds - fields with conditional content were hidden and there was no way to get to them.

If there are recommended solutions - like testing for a variable I’d be keen to hear them.

[colinrotherham]

Adding a list of scenarios from:

• https://github.com/alphagov/govuk-frontend/pull/3095#issuecomment-1348771603

For context: We improved Accordion sections to be visible during page load in https://github.com/alphagov/govuk-frontend/pull/3053 but for slow-loading pages we saw a visual layout shift as each section flickered closed (from open) after initialisation

We’d like to review similar components load with:

1. JavaScript off
2. JavaScript on but crashed
3. JavaScript on but skipped checks
4. JavaScript on but took too long

(Where “skipped checks” could be an early return false after a query selector check fails)