Merge pull request #320 from hmrc/PLATUI-2554

PLATUI-2554 Add utility class to hide stuff when javascript is disabled

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [5.49.0] - 2023-09-27
+
+### Changed
+
+- Add utility class to hide stuff when javascript is disabled
+
 ## [5.48.0] - 2023-09-15
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "5.48.0",
+  "version": "5.49.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/_all.scss

@@ -14,3 +14,4 @@
 @import "user-research-banner/user-research-banner";
 @import "timeline/timeline";
 @import "summary-list/summary-list";
+@import "js-visible/js-visible";

src/components/js-visible/README.md

@@ -0,0 +1,7 @@
+# Utility class to hide stuff when javascript is disabled 
+
+It assumes that you are using the GOV.UK template that adds the js-enabled class to the body element 
+
+If the js-enabled class is not added to the body element of the page with javascript then the element will always be hidden
+
+The elements are hidden using `display: none;` so will not be read aloud by screen readers or navigable by keyboard when hidden

src/components/js-visible/_js-visible.scss

@@ -0,0 +1,3 @@
+body:not(.js-enabled) .hmrc-\!-js-visible {
+  display: none !important;
+}