TD-2311, fixed Aria isssue and added more validation

Author: binon

NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml

@@ -6,6 +6,7 @@
     var dayErrorCss = Model.HasDayError ? "nhsuk-input--error" : "";
     var monthErrorCss = Model.HasMonthError ? "nhsuk-input--error" : "";
     var yearErrorCss = Model.HasYearError ? "nhsuk-input--error" : "";
+    var hintTextLine = string.Empty;
 }
 
 <div class="@Model.CssClass @errorCss" id="@Model.Id">
@@ -27,12 +28,14 @@
         {
             @foreach (var hintText in Model.HintTextLines)
             {
-                <div class="nhsuk-hint" id="@Model.Id-hint">
-                    @hintText
-                </div>
+                hintTextLine = hintText;
             }
         }
 
+        <div class="nhsuk-hint" id="@Model.Id-hint">
+            @hintTextLine
+        </div>
+
         @if (Model.HasError)
         {
             @foreach (var message in Model.ErrorMessages)

NHSUKViewComponents.Web/Views/Shared/Components/DateRangeInput/Default.cshtml

@@ -1,43 +1,53 @@
 @using NHSUKViewComponents.Web.ViewModels
 @model DateRangeInputViewModel
+@{
+    var hintText = string.Empty;
+    var endCheckboxhintText = string.Empty;
+}
 
 <div id="@Model.Id">
-  <fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
-    <legend class="nhsuk-fieldset__legend nhsuk-label nhsuk-heading-m">
-      @Model.Label
-    </legend>
-    @if (Model.HintText != null)
-    {
-      <div class="nhsuk-hint" id="@Model.Id-hint">
-        @Html.Raw(Model.HintText)
-      </div>
-    }
+    <fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
+        <legend class="nhsuk-fieldset__legend nhsuk-label nhsuk-heading-m">
+            @Model.Label
+        </legend>
 
-    <partial name="Components/DateInput/Default" model="Model.StartDateModel" />
-    <div class="nhsuk-checkboxes nhsuk-checkboxes--conditional">
-      <div class="nhsuk-checkboxes__item">
-        <input class="nhsuk-checkboxes__input"
-               type="checkbox"
-               id="@Model.EndDateCheckbox.Id"
-               name="@Model.EndDateCheckbox.Name"
-               aria-describedby="@Model.EndDateCheckbox.Id-item-hint"
-               value="true"
-               aria-controls="conditional-end-date"
-               aria-expanded="@(Model.EndDateCheckbox.Value ? "true" : "false")"
-               @(Model.EndDateCheckbox.Value ? "checked" : string.Empty) />
-        <label class="nhsuk-label nhsuk-checkboxes__label" for="@Model.EndDateCheckbox.Id">
-          Set end date
-        </label>
-        @if (Model.EndDateCheckbox.HintText != null)
+        @if (Model.HintText != null)
         {
-          <div class="nhsuk-hint nhsuk-checkboxes__hint" id="@Model.EndDateCheckbox.Id-item-hint">
-            @Model.EndDateCheckbox.HintText
-          </div>
+            hintText = Model.HintText;
         }
-      </div>
 
-      <partial name="Components/DateInput/Default" model="Model.EndDateModel" />
-    </div>
+        <div class="nhsuk-hint" id="@Model.Id-hint">
+            @hintText
+            @*@Html.Raw(Model.HintText)*@
+        </div>
 
-  </fieldset>
+        <partial name="Components/DateInput/Default" model="Model.StartDateModel" />
+        <div class="nhsuk-checkboxes nhsuk-checkboxes--conditional">
+            <div class="nhsuk-checkboxes__item">
+                <input class="nhsuk-checkboxes__input"
+                       type="checkbox"
+                       id="@Model.EndDateCheckbox.Id"
+                       name="@Model.EndDateCheckbox.Name"
+                       aria-describedby="@Model.EndDateCheckbox.Id-item-hint"
+                       value="true"
+                       aria-controls="conditional-end-date"
+                       aria-expanded="@(Model.EndDateCheckbox.Value ? "true" : "false")"
+                @(Model.EndDateCheckbox.Value ? "checked" : string.Empty) />
+                <label class="nhsuk-label nhsuk-checkboxes__label" for="@Model.EndDateCheckbox.Id">
+                    Set end date
+                </label>
+
+                @if (Model.EndDateCheckbox.HintText != null)
+                {
+                    endCheckboxhintText = @Model.EndDateCheckbox.HintText;
+                }
+                <div class="nhsuk-hint nhsuk-checkboxes__hint" id="@Model.EndDateCheckbox.Id-item-hint">
+                    @endCheckboxhintText
+                </div>
+            </div>
+
+            <partial name="Components/DateInput/Default" model="Model.EndDateModel" />
+        </div>
+
+    </fieldset>
 </div>