Merge pull request #741 from cabinetoffice/feature/govuk-markup-tweaks-2

Feature/govuk markup tweaks 2
cabinetoffice · Oct 10, 2024 · 699d68e · 699d68e
2 parents 41dc47a + 2bd2934
commit 699d68e
Show file tree

Hide file tree

Showing 17 changed files with 2,023 additions and 149 deletions.
diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormElementTextInputModel.cs b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormElementTextInputModel.cs
@@ -73,6 +73,11 @@ private bool IsEmailValidationRequired()
         return Heading?.Contains("email", StringComparison.OrdinalIgnoreCase) == true;
     }
 
+    public string GetFieldType()
+    {
+        return IsEmailValidationRequired() ? "email" : "text";
+    }
+
     private static bool IsValidEmail(string? email)
     {
         if (string.IsNullOrWhiteSpace(email))

diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsAnswerSetRemoveConfirmation.cshtml b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsAnswerSetRemoveConfirmation.cshtml
@@ -13,33 +13,42 @@
 
         <div class="govuk-grid-column-two-thirds">
             <partial name="_ErrorSummary" model="@Model.ModelState" />
-            @if (!string.IsNullOrWhiteSpace(@Model.Caption))
-            {
-                <span class="govuk-caption-l">@Model.Caption</span>
-            }
 
             <form method="post">
-                <fieldset class="govuk-fieldset">
+                <fieldset class="govuk-fieldset" @(hasError ? Html.Raw(@"aria-describedby=""confirm-error""") : null)>
                     <div class="govuk-form-group @(hasError ? "govuk-form-group--error" : "")">
 
                         @if (!string.IsNullOrWhiteSpace(@Model.Heading))
                         {
                             <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-                                <h2 class="govuk-fieldset__heading">
+                                <h1 class="govuk-fieldset__heading">
+                                    @if (!string.IsNullOrWhiteSpace(@Model.Caption))
+                                    {
+                                        <span class="govuk-caption-l">@Model.Caption</span>
+                                    }
                                     @Model.Heading
-                                </h2>
+                                </h1>
                             </legend>
                         }
+
+                        @if (hasError)
+                        {
+                            <p class="govuk-error-message" id="confirm-error">
+                                <span class="govuk-visually-hidden">Error:</span>
+                                @Html.ValidationMessageFor(m => m.ConfirmRemove)
+                            </p>
+                        }
+
                         <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
                             <div class="govuk-radios__item">
-                                <input class="govuk-radios__input" id="conditional-YES" name="ConfirmRemove" type="radio"
+                                <input class="govuk-radios__input" id="@nameof(Model.ConfirmRemove)" name="@nameof(Model.ConfirmRemove)" type="radio"
                                        value="true" @(Model.ConfirmRemove == true ? "checked" : "")>
-                                <label class="govuk-label govuk-radios__label" for="conditional-YES">Yes</label>
+                                <label class="govuk-label govuk-radios__label" for="@nameof(Model.ConfirmRemove)">Yes</label>
                             </div>
                             <div class="govuk-radios__item">
-                                <input class="govuk-radios__input" id="conditional-NO" name="ConfirmRemove" type="radio"
+                                <input class="govuk-radios__input" id="@nameof(Model.ConfirmRemove)-1" name="@nameof(Model.ConfirmRemove)" type="radio"
                                        value="false" @(Model.ConfirmRemove == false ? "checked" : "")>
-                                <label class="govuk-label govuk-radios__label" for="conditional-NO">No</label>
+                                <label class="govuk-label govuk-radios__label" for="@nameof(Model.ConfirmRemove)-1">No</label>
                             </div>
                         </div>
                     </div>

diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsAnswerSetSummary.cshtml b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsAnswerSetSummary.cshtml
@@ -52,9 +52,8 @@
                     <form class="form" method="post">
                         @if (Model.AllowsMultipleAnswerSets)
                         {
-                            <fieldset class="govuk-fieldset">
+                            <fieldset class="govuk-fieldset" @(hasError ? Html.Raw(@"aria-describedby=""add-another-error""") : null)>
                                 <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
-
                                     @if (!string.IsNullOrWhiteSpace(Model.AddAnotherAnswerLabel))
                                     {
                                         <h2 class="govuk-fieldset__heading">
@@ -64,20 +63,20 @@
                                 </legend>
                                 @if (hasError)
                                 {
-                                    <p class="govuk-error-message">
+                                    <p class="govuk-error-message" id="add-another-error">
                                         <span class="govuk-visually-hidden">Error:</span> Select an option
                                     </p>
                                 }
                                 <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
                                     <div class="govuk-radios__item">
-                                        <input class="govuk-radios__input" id="conditional-YES" name="AddAnotherAnswerSet" type="radio"
+                                        <input class="govuk-radios__input" id="@nameof(Model.AddAnotherAnswerSet)" name="@nameof(Model.AddAnotherAnswerSet)" type="radio"
                                                value="true" @(Model.AddAnotherAnswerSet == true ? "checked" : "")>
-                                        <label class="govuk-label govuk-radios__label" for="conditional-YES">Yes</label>
+                                        <label class="govuk-label govuk-radios__label" for="@nameof(Model.AddAnotherAnswerSet)">Yes</label>
                                     </div>
                                     <div class="govuk-radios__item">
-                                        <input class="govuk-radios__input" id="conditional-NO" name="AddAnotherAnswerSet" type="radio"
+                                        <input class="govuk-radios__input" id="@nameof(Model.AddAnotherAnswerSet)-1" name="@nameof(Model.AddAnotherAnswerSet)" type="radio"
                                                value="false" @(Model.AddAnotherAnswerSet == false ? "checked" : "")>
-                                        <label class="govuk-label govuk-radios__label" for="conditional-NO">No</label>
+                                        <label class="govuk-label govuk-radios__label" for="@nameof(Model.AddAnotherAnswerSet)-1">No</label>
                                     </div>
                                 </div>
                             </fieldset>

diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsCheckFurtherQuestionsExempted.cshtml b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsCheckFurtherQuestionsExempted.cshtml
@@ -15,25 +15,31 @@
 
             <form method="post">
                 <div class="govuk-form-group @(hasError ? "govuk-form-group--error" : "")">
-                    <fieldset class="govuk-fieldset">
+                    <fieldset class="govuk-fieldset" @(hasError ? Html.Raw(@"aria-describedby=""confirm-error""") : null)>
                         @if (!string.IsNullOrEmpty(Model.Heading))
                         {
                             @Html.Raw(Model.Heading)
                         }
 
-                        <div class="govuk-radios govuk-!-margin-top-6" data-module="govuk-radios">
+                        @if (hasError)
+                        {
+                            <p class="govuk-error-message" id="confirm-error">
+                                <span class="govuk-visually-hidden">Error:</span> Select an option
+                            </p>
+                        }
+
+                        <div class="govuk-radios" data-module="govuk-radios">
                             <div class="govuk-radios__item">
-                                <input class="govuk-radios__input" id="conditional-YES" name="Confirm" type="radio"
+                                <input class="govuk-radios__input" id="@nameof(Model.Confirm)" name="@nameof(Model.Confirm)" type="radio"
                                        value="true" @(Model.Confirm == true ? "checked" : "")>
-                                <label class="govuk-label govuk-radios__label" for="conditional-YES">Yes</label>
+                                <label class="govuk-label govuk-radios__label" for="@nameof(Model.Confirm)">Yes</label>
                             </div>
                             <div class="govuk-radios__item">
-                                <input class="govuk-radios__input" id="conditional-NO" name="Confirm" type="radio"
+                                <input class="govuk-radios__input" id="@nameof(Model.Confirm)-1" name="@nameof(Model.Confirm)" type="radio"
                                        value="false" @(Model.Confirm == false ? "checked" : "")>
-                                <label class="govuk-label govuk-radios__label" for="conditional-NO">No</label>
+                                <label class="govuk-label govuk-radios__label" for="@nameof(Model.Confirm)-1">No</label>
                             </div>
                         </div>
-
                     </fieldset>
                 </div>
 

diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsQuestionPage.cshtml b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/FormsQuestionPage.cshtml
@@ -32,7 +32,7 @@
         <div class="@(isCheckYourAnswersPage ? "govuk-grid-column-full" : "govuk-grid-column-two-thirds")">
             <partial name="_ErrorSummary" model="@ModelState" />
 
-            <form method="post" enctype="@Model.EncType">
+            <form method="post" enctype="@Model.EncType" novalidate>
                 @if (Model.PartialViewName != null && Model.PartialViewModel != null)
                 {
                     @await Html.PartialAsync(Model.PartialViewName, Model.PartialViewModel)

diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/_FormElementAddress.cshtml b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/_FormElementAddress.cshtml
@@ -7,32 +7,34 @@
     var countryHasError = ((TagBuilder)Html.ValidationMessageFor(m => m.Country)).HasInnerHtml;
 }
 
-<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-    @if (!string.IsNullOrWhiteSpace(Model.Caption))
+<fieldset class="govuk-fieldset" @(!string.IsNullOrWhiteSpace(Model.Description) ? Html.Raw(@"aria-describedby=""address-hint""") : null)>
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+        @if (!string.IsNullOrWhiteSpace(Model.Caption))
+        {
+            <span class="govuk-caption-l">@Model.Caption</span>
+        }
+        @if (!string.IsNullOrWhiteSpace(Model.Heading))
+        {
+            <h1 class="govuk-fieldset__heading">@Model.Heading</h1>
+        }
+    </legend>
+
+    @if (!string.IsNullOrWhiteSpace(Model.Description))
     {
-        <span class="govuk-caption-l">@Model.Caption</span>
+        <div id="address-hint">
+            @Html.Raw(Model.Description)
+        </div>
     }
-    @if (!string.IsNullOrWhiteSpace(Model.Heading))
+
+    @if (!Model.IsNonUkAddress)
     {
-        <h1 class="govuk-fieldset__heading">@Model.Heading</h1>
+        <p>
+            <a class="govuk-link govuk-!-font-size-19" href="?UkOrNonUk=non-uk@(Context.Request.Query.ContainsKey("frm-chk-answer") ? "&frm-chk-answer" : "")">
+                Enter a non-UK address
+            </a>
+        </p>
     }
-</legend>
-
-@if (!string.IsNullOrWhiteSpace(Model.Description))
-{
-    @Html.Raw(Model.Description)
-}
-
-@if (!Model.IsNonUkAddress)
-{
-    <p>
-        <a class="govuk-link govuk-!-font-size-19" href="?UkOrNonUk=non-uk@(Context.Request.Query.ContainsKey("frm-chk-answer") ? "&frm-chk-answer" : "")">
-            Enter a non-UK address
-        </a>
-    </p>
-}
 
-<div class="govuk-form-group">
     <div class="govuk-form-group govuk-!-margin-top-3 @(addressLine1HasError ? "govuk-form-group--error" : "")">
         <label class="govuk-label" for="@nameof(Model.AddressLine1)">
             @Html.DisplayNameFor(m => m.AddressLine1)
@@ -45,8 +47,8 @@
             </p>
         }
         <input class="govuk-input @(addressLine1HasError ? "govuk-input--error" : "")" id="@nameof(Model.AddressLine1)"
-               value="@Model.AddressLine1" name="@nameof(Model.AddressLine1)" type="text"
-               spellcheck="false" @(addressLine1HasError ? "aria-describedby=address-one-error" : "")>
+                value="@Model.AddressLine1" name="@nameof(Model.AddressLine1)" type="text"
+                spellcheck="false" @(addressLine1HasError ? "aria-describedby=address-one-error" : "")>
     </div>
 
     <div class="govuk-form-group @(cityOrTownHasError ? "govuk-form-group--error" : "")">
@@ -61,8 +63,8 @@
             </p>
         }
         <input class="govuk-input govuk-!-width-two-thirds @(cityOrTownHasError ? "govuk-input--error" : "")" id="@nameof(Model.TownOrCity)"
-               value="@Model.TownOrCity" name="@nameof(Model.TownOrCity)" type="text"
-               spellcheck="false" @(cityOrTownHasError ? "aria-describedby=city-error" : "")>
+                value="@Model.TownOrCity" name="@nameof(Model.TownOrCity)" type="text"
+                spellcheck="false" @(cityOrTownHasError ? "aria-describedby=city-error" : "")>
     </div>
 
     <div class="govuk-form-group @(postcodeHasError ? "govuk-form-group--error" : "")">
@@ -77,8 +79,8 @@
             </p>
         }
         <input class="govuk-input govuk-input--width-10 @(postcodeHasError ? "govuk-input--error" : "")" id="@nameof(Model.Postcode)"
-               value="@Model.Postcode" name="@nameof(Model.Postcode)" type="text"
-               spellcheck="false" @(postcodeHasError ? "aria-describedby=postcode-error" : "")>
+                value="@Model.Postcode" name="@nameof(Model.Postcode)" type="text"
+                spellcheck="false" @(postcodeHasError ? "aria-describedby=postcode-error" : "")>
     </div>
 
     @if (Model.IsNonUkAddress)
@@ -112,4 +114,4 @@
             <input type="hidden" id="@nameof(Model.Country)" name="@nameof(Model.Country)" value="@Constants.Country.UKCountryCode" />
         </div>
     }
-</div>
+</fieldset>
diff --git a/Frontend/CO.CDP.OrganisationApp/Pages/Forms/_FormElementCheckBoxInput.cshtml b/Frontend/CO.CDP.OrganisationApp/Pages/Forms/_FormElementCheckBoxInput.cshtml
@@ -4,33 +4,34 @@
     var hasError = ((TagBuilder)Html.ValidationMessageFor(m => m.CheckBoxInput)).HasInnerHtml;
 }
 
-
 <div class="govuk-form-group @(hasError ? "govuk-form-group--error" : "")">
-    <fieldset class="govuk-fieldset">
+    <fieldset class="govuk-fieldset" @(!string.IsNullOrWhiteSpace(Model.Description) ? Html.Raw(@"aria-describedby=""checkbox-hint""") : null)>
         <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
             @if (!string.IsNullOrWhiteSpace(Model.Heading))
             {
-                <h2 class="govuk-fieldset__heading">@Model.Heading</h2>
+                <h1 class="govuk-fieldset__heading">@Model.Heading</h1>
             }
         </legend>
 
         @if (!string.IsNullOrEmpty(Model.Description))
         {
-            @Html.Raw(Model.Description)
+            <div id="checkbox-hint">
+                @Html.Raw(Model.Description)
+            </div>
         }
 
         @if (hasError)
         {
-            <span class="govuk-error-message">
+            <span class="govuk-error-message" id="checkbox-error">
                 <span class="govuk-visually-hidden">Error:</span>
                 @Html.ValidationMessageFor(m => m.CheckBoxInput)
             </span>
         }
 
         <div class="govuk-checkboxes" data-module="govuk-checkboxes">
             <div class="govuk-checkboxes__item">
-                <input class="govuk-checkboxes__input" id="declarationStatement" name="CheckBoxInput" type="checkbox" value="true" @(Model.CheckBoxInput == true ? "checked" : "")>
-                <label class="govuk-label govuk-checkboxes__label" for="declarationStatement">
+                <input class="govuk-checkboxes__input" id="@nameof(Model.CheckBoxInput)" name="@nameof(Model.CheckBoxInput)" type="checkbox" value="true" @(Model.CheckBoxInput == true ? "checked" : "") @(hasError ? Html.Raw(@"aria-describedby=""checkbox-error""") : null)>
+                <label class="govuk-label govuk-checkboxes__label" for="@nameof(Model.CheckBoxInput)">
                     @Html.Raw(Model.Options?.Choices?.Values.FirstOrDefault())
                 </label>
             </div>