Degrade gracefully when external JS can’t be loaded

There are plenty of situations where external JS could fail to load and be unavailable. For performance reasons we apply the js-enabled class inline, which can lead to a mismatch between the JS availability and the styling hook.

To work around this, we can check at the end of the document to see whether GOVUK (our standard module namespace) exists. If not then the external JS hasn’t triggered: at this point we can remove the js-enabled class from the body and fall back to the non-JS styling.

source/views/layouts/govuk_template.html.erb

@@ -101,5 +101,8 @@
     <script src="<%= asset_path "govuk-template.js" %>"></script>
 
     <%= yield :body_end %>
+
+    <%# if no GOVUK-namespaced module has loaded we can assume JS has failed and remove the class %>
+    <script>if (typeof window.GOVUK === 'undefined') document.body.className = document.body.className.replace('js-enabled', '');</script>
   </body>
 </html>