From c662ade03dc9536a3471a95b5c0e5270189e4b85 Mon Sep 17 00:00:00 2001
From: Dalin Akrasi <Dalin.Akrasi@hee.nhs.uk>
Date: Thu, 19 Sep 2024 09:00:36 +0100
Subject: [PATCH] Identify Radio Buttons Error Messages PT1

---
 .../Shared/Components/RadioList/Default.cshtml   | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
index 05eb266..2bcd6da 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
@@ -44,7 +44,7 @@
 
         @if (Model.Required && !Model.HasError)
         {
-            <div data-valmsg-for="@Model.AspFor" data-valmsg-replace="true" class="error-message--margin-bottom-1 nhsuk-error-message field-validation-valid nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+            <div data-valmsg-for="@Model.AspFor" data-valmsg-replace="true" class="error-message--margin-bottom-1 nhsuk-error-message field-validation-valid nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3" aria-live="assertive" role="alert">
             </div>
         }
 
@@ -131,5 +131,19 @@
 
         </div>
     </fieldset>
+    <script>
+        window.onload = function() {
+            const id = "@Model.AspFor";
+            const radioForm = document.querySelector("main form[novalidate='novalidate']");
+            radioForm.addEventListener("submit", () => {
+                const errorMessageParent = document.querySelector("div[data-valmsg-for='" + id + "']");
+                const errorMessage = errorMessageParent.innerHTML;
+                errorMessageParent.innerHTML = "";
 
+                setTimeout(function () {
+                    errorMessageParent.innerHTML = errorMessage;
+                }, 0);
+            });
+        };
+    </script>
 </div>
\ No newline at end of file