Update initialisation script snippet in layouts

For govuk-frontend v5, there now needs to be additional class added to the `body` tag to indicate that the components are supported. This class is `govuk-frontend-supported` and is added if the browser supports JS of type `module` (which is the new browser target for govuk-frontend). The script tag is directly taken from the documentation.
alphagov · Apr 15, 2024 · 3d0de74 · 3d0de74
1 parent 690385d
commit 3d0de74
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/app/views/govuk_publishing_components/components/_layout_for_admin.html.erb b/app/views/govuk_publishing_components/components/_layout_for_admin.html.erb
@@ -19,7 +19,7 @@
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body">
     <%= javascript_tag nonce: true do -%>
-      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
     <% end -%>
     <%= yield %>
     <%= javascript_include_tag "application" %>

diff --git a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb
@@ -97,7 +97,7 @@
   </head>
   <%= tag.body class: body_css_classes do %>
     <%= javascript_tag nonce: true do -%>
-      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
     <% end -%>
     <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
     <%= render "govuk_publishing_components/components/skip_link", {

diff --git a/app/views/layouts/govuk_publishing_components/application.html.erb b/app/views/layouts/govuk_publishing_components/application.html.erb
@@ -47,7 +47,7 @@
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body <%= 'hide-header-and-footer' if @preview %>">
     <%= javascript_tag nonce: true do -%>
-      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
     <% end -%>
     <%= yield :body %>