Merge pull request #789 from TechnologyEnhancedLearning/Develop/Fixes/TD-4180-Updating-View-Component-files

TD-4180: Updating View Component files

Author: ArunimaGeorge

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

@@ -8,7 +8,7 @@
     var yearErrorCss = Model.HasYearError ? "nhsuk-input--error" : "";
     var hintTextLine = string.Empty;
 }
-
+@* Removed pattern property *@
 <div class="@Model.CssClass @errorCss" id="@Model.Id">
     <fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
         <legend class="nhsuk-fieldset__legend nhsuk-label">
@@ -54,12 +54,12 @@
                            id="@Model.DayId"
                            name="@Model.DayId"
                            value="@Model.DayValue"
-                           type="number"
-                           pattern="[0-9]*"
+                           type="text"
                            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 +69,12 @@
                            id="@Model.MonthId"
                            name="@Model.MonthId"
                            value="@Model.MonthValue"
-                           type="number"
-                           pattern="[0-9]*"
+                           type="text"
                            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,12 +84,12 @@
                            id="@Model.YearId"
                            name="@Model.YearId"
                            value="@Model.YearValue"
-                           type="number"
-                           pattern="[0-9]*"
+                           type="text"
                            min="1900"
                            max="9999"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
         </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

@@ -9,7 +9,7 @@
 
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
 
-    <fieldset class="nhsuk-fieldset" aria-describedby="@(!string.IsNullOrEmpty(Model.HintText) ? $"{Model.Label.RemoveWhitespace()}-hint" : string.Empty)">
+    <fieldset id="@Model.AspFor" class="nhsuk-fieldset" aria-describedby="@(!string.IsNullOrEmpty(Model.HintText) ? $"{Model.Label.RemoveWhitespace()}-hint" : string.Empty)">
         <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
             @if (Model.IsPageHeading.GetValueOrDefault() == true)
             {
@@ -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,4 @@
 
         </div>
     </fieldset>
-
 </div>