Merge pull request #755 from TechnologyEnhancedLearning/Updated-NHS-design-System

Updated nhs design system model version

Author: AnjuJose011

LearningHub.Nhs.WebUI/LearningHub.Nhs.WebUI.csproj

@@ -125,7 +125,7 @@
 		<PackageReference Include="Microsoft.Rest.ClientRuntime.Azure.Authentication" Version="2.4.1" />
 		<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="6.0.10" />
 		<PackageReference Include="MK.IO" Version="1.5.0" />
-		<PackageReference Include="NHSUKViewComponents.Web" Version="1.0.24" />
+		<PackageReference Include="NHSUKViewComponents.Web" Version="1.0.25" />
 		<PackageReference Include="StyleCop.Analyzers" Version="1.1.118">
 			<PrivateAssets>all</PrivateAssets>
 			<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

LearningHub.Nhs.WebUI/Views/Shared/Components/DateInput/Default.cshtml

@@ -54,12 +54,13 @@
                            id="@Model.DayId"
                            name="@Model.DayId"
                            value="@Model.DayValue"
-                           type="number"
+                           type="text"
                            pattern="[0-9]*"
                            min="1"
                            max="31"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
             <div class="nhsuk-date-input__item">
@@ -69,12 +70,13 @@
                            id="@Model.MonthId"
                            name="@Model.MonthId"
                            value="@Model.MonthValue"
-                           type="number"
+                           type="text"
                            pattern="[0-9]*"
                            min="1"
                            max="12"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
             <div class="nhsuk-date-input__item">
@@ -84,14 +86,50 @@
                            id="@Model.YearId"
                            name="@Model.YearId"
                            value="@Model.YearValue"
-                           type="number"
+                           type="text"
                            pattern="[0-9]*"
                            min="1900"
                            max="9999"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
+            <span id="date-error" class="error-message--margin-bottom-1 nhsuk-error-message" aria-live="polite" style="visibility: hidden;">
+            </span>
         </div>
     </fieldset>
+    <script>
+        const fields = [@Model.DayId, @Model.MonthId, @Model.YearId];
+
+        const errorElement = document.getElementById('date-error');
+        for (let field of fields) {
+            const inputElement = document.getElementById(field.id);
+
+            inputElement.addEventListener('input', function (event) {
+
+                if (event.inputType === 'deleteContentBackward') {
+                    return;
+                }
+
+                const value = event.data;
+                const min = parseInt(inputElement.getAttribute('min'));
+                const max = parseInt(inputElement.getAttribute('max'));
+
+                inputElement.setAttribute('aria-invalid', 'false');
+                errorElement.textContent = '';
+                errorElement.style.visibility = 'hidden';
+
+                setTimeout(function () {
+                    if (value < 1 || value > max || !value.match(/^[0-9]*$/)) {
+                        inputElement.value = inputElement.value.slice(0, -1) + 1;
+                        inputElement.value = inputElement.value.slice(0, -1);
+                        inputElement.setAttribute('aria-invalid', 'true');
+                        errorElement.textContent = `Invalid input. Please enter a number between ${min} and ${max}.`;
+                        errorElement.style.visibility = 'visible';
+                    }
+                }, 0);
+            });
+        }
+    </script>
 </div>

LearningHub.Nhs.WebUI/Views/Shared/Components/ErrorSummary/Default.cshtml

@@ -21,6 +21,10 @@
             </ul>
         </div>
     </div>
+    <script>
+        const errorSummary = document.querySelector("#error-summary-title").parentElement;
+        errorSummary.focus();
+    </script>
 }
 else
 {

LearningHub.Nhs.WebUI/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>