From 9367c393ad10b6876e148512d4252db000c2ad29 Mon Sep 17 00:00:00 2001
From: katie-gardner-AND <katharine.gardner@and.digital>
Date: Thu, 5 Sep 2024 10:36:17 +0100
Subject: [PATCH] chore: Simplify hiding js-only elements

---
 .../Views/Content/CsIndex.cshtml              | 26 +------------------
 .../Views/Shared/_CsLayout.cshtml             |  7 +++++
 .../Views/Shared/_Feedback.cshtml             |  2 +-
 .../Views/Shared/_Print.cshtml                |  2 +-
 4 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml b/src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml
index 3087d3a..f0cba6a 100644
--- a/src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml
+++ b/src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml
@@ -76,28 +76,4 @@
             addPrintButtonEventListener();
         </script>
     }
-
-    <script nonce="@Context.Items["nonce"]" defer>
-        const hiddenClass = "govuk-visually-hidden";
-
-        //Some elements should remain hidden
-        const idsToNotShow = ["support-links"];
-
-        //Remove hidden visibility CSS class if JS enabled
-        const removeHiddenClassFromElements = () => {
-            const hiddenElements = Array.from(document.querySelectorAll(`.${hiddenClass}`));
-
-            for(const element of hiddenElements){
-                if(idsToNotShow.indexOf(element.id) > -1){
-                    continue;
-                }
-
-                element.classList.remove(hiddenClass);
-                //Also unset "aria-hidden" attribute
-                element.ariaHidden = undefined;
-            }
-        }
-
-        removeHiddenClassFromElements();
-    </script>
-}
\ No newline at end of file
+}
diff --git a/src/Dfe.ContentSupport.Web/Views/Shared/_CsLayout.cshtml b/src/Dfe.ContentSupport.Web/Views/Shared/_CsLayout.cshtml
index fa842bf..5aed44a 100644
--- a/src/Dfe.ContentSupport.Web/Views/Shared/_CsLayout.cshtml
+++ b/src/Dfe.ContentSupport.Web/Views/Shared/_CsLayout.cshtml
@@ -69,6 +69,13 @@
     <script defer type="module" nonce="@Context.Items["nonce"]">
         import * as govuk from '/js/govuk-frontend.min.js';
         govuk.initAll();
+
+        function showHiddenElement(element) {
+            element.classList.remove("govuk-visually-hidden");
+            element.ariaHidden = undefined;
+        }
+        // unhide all js-only elements when js is enabled
+        [...document.getElementsByClassName("js-only")].forEach(showHiddenElement)
     </script>
 
     @RenderSection("BodyEnd", false)
diff --git a/src/Dfe.ContentSupport.Web/Views/Shared/_Feedback.cshtml b/src/Dfe.ContentSupport.Web/Views/Shared/_Feedback.cshtml
index c6fbf40..b7fc3d0 100644
--- a/src/Dfe.ContentSupport.Web/Views/Shared/_Feedback.cshtml
+++ b/src/Dfe.ContentSupport.Web/Views/Shared/_Feedback.cshtml
@@ -17,7 +17,7 @@
 
 @if (track)
 {
-    <div class="dfe-feedback-banner govuk-!-margin-top-9 govuk-visually-hidden" aria-hidden="true" id="feedback-banner">
+    <div class="dfe-feedback-banner govuk-!-margin-top-9 js-only govuk-visually-hidden" aria-hidden="true" id="feedback-banner">
         <div class="dfe-feedback-banner--content">
             <form id="feedbackForm">
                 <div class="dfe-feedback-banner--content-questions">
diff --git a/src/Dfe.ContentSupport.Web/Views/Shared/_Print.cshtml b/src/Dfe.ContentSupport.Web/Views/Shared/_Print.cshtml
index b65a3b2..406ccdf 100644
--- a/src/Dfe.ContentSupport.Web/Views/Shared/_Print.cshtml
+++ b/src/Dfe.ContentSupport.Web/Views/Shared/_Print.cshtml
@@ -1,3 +1,3 @@
-<div class="print-button govuk-visually-hidden" aria-hidden="true">
+<div class="js-only print-button govuk-visually-hidden" aria-hidden="true">
     <button class="govuk-link print-link-button" data-module="print-link" id="print-link" >Print this page</button>
 </div>
\ No newline at end of file