feat: Hide JS dependant elements unless JS enabled

DFE-Digital · Aug 27, 2024 · 839d46e · 839d46e
1 parent e08f936
commit 839d46e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml b/src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml
@@ -76,4 +76,28 @@
             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>
 }
diff --git 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">
+    <div class="dfe-feedback-banner govuk-!-margin-top-9 govuk-visually-hidden" aria-hidden="true">
         <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/_Footer.cshtml b/src/Dfe.ContentSupport.Web/Views/Shared/_Footer.cshtml
@@ -1,8 +1,8 @@
 <footer class="govuk-footer " role="contentinfo">
-    <div class="govuk-width-container ">
+    <div class="govuk-width-container">
         <div class="govuk-footer__meta">
             <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-                <h2 class="govuk-visually-hidden">Support links</h2>
+                <h2 class="govuk-visually-hidden" id="support-links">Support links</h2>
                 @* @await Component.InvokeAsync("FooterLinks") *@
                 <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">

diff --git 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">
-    <button class="govuk-link print-link-button" data-module="print-link" id="print-link">Print this page</button>
+    <button class="govuk-link print-link-button govuk-visually-hidden" data-module="print-link" id="print-link" aria-hidden="true">Print this page</button>
 </div>