DLSV2-548 Further accessibility fixes following internal and external retest

DigitalLearningSolutions.Web/ViewComponents/NumericInputViewComponent.cs

@@ -12,7 +12,8 @@ public IViewComponentResult Invoke(
             bool populateWithCurrentValue,
             string type,
             string hintText,
-            string cssClass
+            string cssClass,
+            bool required
         )
         {
             var model = ViewData.Model;
@@ -31,7 +32,8 @@ string cssClass
                 type,
                 errorMessages,
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
-                string.IsNullOrEmpty(hintText) ? null : hintText
+                string.IsNullOrEmpty(hintText) ? null : hintText,
+                required
             );
             return View(numericInputViewModel);
         }

DigitalLearningSolutions.Web/ViewComponents/RadiosViewComponent.cs

@@ -13,7 +13,8 @@ public IViewComponentResult Invoke(
             string label,
             IEnumerable<RadiosListItemViewModel> radios,
             bool populateWithCurrentValues,
-            string? hintText
+            string? hintText,
+            bool required
         )
         {
             var radiosList = radios.Select(
@@ -29,7 +30,8 @@ public IViewComponentResult Invoke(
                 aspFor,
                 label,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
-                radiosList
+                radiosList,
+                required
             );
 
             return View(viewModel);

DigitalLearningSolutions.Web/ViewComponents/SelectListViewComponent.cs

@@ -15,7 +15,7 @@ public IViewComponentResult Invoke(
             IEnumerable<SelectListItem> selectListOptions,
             string? hintText,
             string? cssClass,
-            bool? deselectable
+            bool required
         )
         {
             var model = ViewData.Model;
@@ -36,7 +36,7 @@ public IViewComponentResult Invoke(
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 errorMessage,
                 hasError,
-                deselectable ?? false
+                required
             );
             return View(selectListViewModel);
         }

DigitalLearningSolutions.Web/ViewComponents/TextInputViewComponent.cs

@@ -17,6 +17,7 @@ public class TextInputViewComponent : ViewComponent
         /// <param name="hintText">Leave blank for no hint.</param>
         /// <param name="autocomplete">Leave blank to set no autocomplete on the input element.</param>
         /// <param name="cssClass"></param>
+        /// <param name="required"></param>
         /// <returns></returns>
         public IViewComponentResult Invoke(
             string aspFor,
@@ -26,7 +27,8 @@ public IViewComponentResult Invoke(
             bool spellCheck,
             string hintText,
             string autocomplete,
-            string cssClass
+            string cssClass,
+            bool required
         )
         {
             var model = ViewData.Model;
@@ -47,7 +49,8 @@ string cssClass
                 string.IsNullOrEmpty(autocomplete) ? null : autocomplete,
                 errorMessages,
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
-                string.IsNullOrEmpty(hintText) ? null : hintText
+                string.IsNullOrEmpty(hintText) ? null : hintText,
+                required
             );
             return View(textBoxViewModel);
         }

DigitalLearningSolutions.Web/ViewModels/Common/ViewComponents/NumericInputViewModel.cs

@@ -15,20 +15,22 @@ public NumericInputViewModel(
             string type,
             IEnumerable<string> errorMessages,
             string? cssClass = null,
-            string? hintText = null
+            string? hintText = null,
+            bool required = false
         )
         {
             var errorMessageList = errorMessages.ToList();
 
             Id = id;
             Class = cssClass;
             Name = name;
-            Label = label;
+            Label = (!required && !label.EndsWith("(optional)") ? label + " (optional)" : label);
             Value = value;
             Type = type;
             HintText = hintText;
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
+            Required = required;
         }
 
         public string Id { get; set; }
@@ -39,5 +41,6 @@ public NumericInputViewModel(
         public string Type { get; set; }
         public string? HintText { get; set; }
         public IEnumerable<string> ErrorMessages { get; set; }
+        public bool Required { get; set; }
     }
 }

DigitalLearningSolutions.Web/ViewModels/Common/ViewComponents/RadiosViewModel.cs

@@ -8,13 +8,15 @@ public RadiosViewModel(
             string aspFor,
             string label,
             string? hintText,
-            IEnumerable<RadiosItemViewModel> radios
+            IEnumerable<RadiosItemViewModel> radios,
+            bool required
         )
         {
             AspFor = aspFor;
-            Label = label;
+            Label = (!required && !label.EndsWith("(optional)") ? label + " (optional)" : label);
             HintText = hintText;
             Radios = radios;
+            Required = required;
         }
 
         public string AspFor { get; set; }
@@ -24,5 +26,6 @@ IEnumerable<RadiosItemViewModel> radios
         public string? HintText { get; set; }
 
         public IEnumerable<RadiosItemViewModel> Radios { get; set; }
+        public bool Required { get; set; }
     }
 }

DigitalLearningSolutions.Web/ViewModels/Common/ViewComponents/SelectListViewModel.cs

@@ -17,20 +17,20 @@ public SelectListViewModel
             string? hintText = null,
             string? errorMessage = null,
             bool hasError = false,
-            bool deselectable = false
+            bool required = false
         )
         {
             Id = id;
             Class = cssClass;
             Name = name;
-            Label = label;
+            Label = (!required && !label.EndsWith("(optional)") ? label + " (optional)" : label);
             Value = value;
             DefaultOption = defaultOption;
             SelectListOptions = selectListOptions;
             HintText = hintText;
             ErrorMessage = errorMessage;
             HasError = hasError;
-            Deselectable = deselectable;
+            Required = required;
         }
 
         public string Id { get; set; }
@@ -43,6 +43,6 @@ public SelectListViewModel
         public string? HintText { get; set; }
         public string? ErrorMessage { get; set; }
         public bool HasError { get; set; }
-        public bool Deselectable { get; set; }
+        public bool Required { get; set; }
     }
 }

DigitalLearningSolutions.Web/ViewModels/Common/ViewComponents/TextInputViewModel.cs

@@ -15,20 +15,22 @@ public TextInputViewModel(
             string? autocomplete,
             IEnumerable<string> errorMessages,
             string? cssClass = null,
-            string? hintText = null
+            string? hintText = null,
+            bool required = false
         )
         {
             var errorMessageList = errorMessages.ToList();
 
             Id = id;
             Class = cssClass;
             Name = name;
-            Label = label;
+            Label = (!required && !label.EndsWith("(optional)") ? label + " (optional)" : label);
             Value = value;
             Type = type;
             SpellCheck = spellCheck;
             Autocomplete = autocomplete;
             HintText = hintText;
+            Required = required;
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
         }
@@ -42,6 +44,7 @@ public TextInputViewModel(
         public bool SpellCheck { get; set; }
         public string? Autocomplete { get; set; }
         public string? HintText { get; set; }
+        public bool Required { get; set; }
         public IEnumerable<string> ErrorMessages { get; set; }
         public readonly bool HasError;
     }

DigitalLearningSolutions.Web/Views/ChangePassword/Index.cshtml

@@ -29,7 +29,8 @@
         spell-check="false"
         hint-text=""
         autocomplete="current-password"
-        css-class="nhsuk-u-width-one-half" />
+        css-class="nhsuk-u-width-one-half"
+        required="true" />
 
       <vc:text-input
         asp-for="@nameof(Model.Password)"
@@ -39,7 +40,8 @@
         spell-check="false"
         hint-text="Your new password should have a minimum of 8 characters with at least 1 letter, 1 number and 1 symbol."
         autocomplete="new-password"
-        css-class="nhsuk-u-width-one-half" />
+        css-class="nhsuk-u-width-one-half"
+        required="true" />
 
       <vc:text-input
         asp-for="@nameof(Model.ConfirmPassword)"
@@ -49,7 +51,8 @@
         spell-check="false"
         hint-text=""
         autocomplete="new-password"
-        css-class="nhsuk-u-width-one-half" />
+        css-class="nhsuk-u-width-one-half"
+        required="true" />
 
       <button class="nhsuk-button" type="submit">Change password</button>
     </form>

DigitalLearningSolutions.Web/Views/LearningPortal/RecommendedLearning/_SearchableRecommendedResourceCard.cshtml

@@ -44,6 +44,7 @@
       <a class="nhsuk-button nhsuk-u-margin-bottom-2 nhsuk-u-margin-top-0"
          role="button"
          data-return-page-enabled="true"
+         aria-label="Add to action plan '@Model.ResourceName'"
          asp-controller="RecommendedLearning"
          asp-action="AddResourceToActionPlan"
          asp-route-selfAssessmentId="@Model.SelfAssessmentId"
@@ -55,6 +56,7 @@
 
     <a class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-bottom-2 nhsuk-u-margin-top-0"
        role="button"
+       aria-label="Preview resource '@Model.ResourceName'"
        asp-controller="Signposting"
        asp-action="LaunchLearningResource"
        asp-route-resourceReferenceId="@Model.LearningHubReferenceId">

DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/SelfAssessmentCompetency.cshtml

@@ -12,20 +12,20 @@
   <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" asp-action="SelfAssessmentOverview" asp-route-vocabulary="@Model.VocabPlural()" asp-route-selfAssessmentId="@Model.Assessment.Id" asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID" asp-fragment="comp-@Model.CompetencyNumber">@(Model.VocabPlural()) home</a></li>
   <li class="nhsuk-breadcrumb__item">@DisplayStringHelper.Ellipsis(Model.Competency?.Name, 30)</li>
 }
-@section mobilebacklink
-{
+  @section mobilebacklink
+  {
   <p class="nhsuk-breadcrumb__back">
     <a class="nhsuk-breadcrumb__backlink" asp-action="SelfAssessmentOverview"
-       asp-route-vocabulary="@Model.VocabPlural()"
-       asp-route-selfAssessmentId="@Model.Assessment.Id"
-       asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID"
-       asp-fragment="comp-@Model.CompetencyNumber">
+     asp-route-vocabulary="@Model.VocabPlural()"
+     asp-route-selfAssessmentId="@Model.Assessment.Id"
+     asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID"
+     asp-fragment="comp-@Model.CompetencyNumber">
       Back to @Model.VocabPlural()
     </a>
   </p>
 }
-<link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
-<link rel="stylesheet" href="@Url.Content("~/css/shared/searchableElements/pagination.css")" asp-append-version="true">
+  <link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
+  <link rel="stylesheet" href="@Url.Content("~/css/shared/searchableElements/pagination.css")" asp-append-version="true">
 @if (errorHasOccurred)
 {
   <vc:error-summary order-of-property-names="@(new[] { nameof(Model) })" />
@@ -49,14 +49,14 @@
   }
   else
   {
-    <h2 class="nhsuk-u-margin-bottom-0 nhsuk-u-font-size-24">
+    <h2 class="nhsuk-u-margin-bottom-2 nhsuk-u-font-size-24">
       @Model.Competency.Name
     </h2>
     @if (Model.Competency.Description != null)
     {
-      <p class="nhsuk-body-l">
+      <div class="nhsuk-body-l">
         @(Html.Raw(@Model.Competency.Description))
-      </p>
+      </div>
     }
   }
 </div>
@@ -107,9 +107,9 @@
         <div class="pagination-button-container">
           <div class="nhsuk-pagination-item--previous">
             <a class="nhsuk-back-link__link"
-               asp-action=@(Model.CompetencyNumber == 1 ? "SelfAssessment" : "SelfAssessmentCompetency")
-               asp-route-selfAssessmentId="@Model.Assessment.Id"
-               asp-route-competencyNumber=@(Model.CompetencyNumber == 1 ? "" : (Model.CompetencyNumber - 1).ToString())>
+             asp-action=@(Model.CompetencyNumber == 1 ? "SelfAssessment" : "SelfAssessmentCompetency")
+             asp-route-selfAssessmentId="@Model.Assessment.Id"
+             asp-route-competencyNumber=@(Model.CompetencyNumber == 1 ? "" : (Model.CompetencyNumber - 1).ToString())>
               <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                 <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
               </svg>
@@ -119,22 +119,23 @@
         </div>
         <div class="page-indicator-container">
           <a class="nhsuk-back-link__link"
-             asp-action="SelfAssessmentOverview"
-             asp-route-selfAssessmentId="@Model.Assessment.Id" asp-route-vocabulary="@Model.VocabPlural()" asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID" asp-fragment="comp-@Model.CompetencyNumber">
+           asp-action="SelfAssessmentOverview"
+           asp-route-selfAssessmentId="@Model.Assessment.Id" asp-route-vocabulary="@Model.VocabPlural()" asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID" asp-fragment="comp-@Model.CompetencyNumber">
             <span class="nhsuk-pagination__page">Return to @Model.VocabPlural() home</span>
           </a>
         </div>
         <div class="pagination-button-container nhsuk-u-margin-right-6">
           <div class="nhsuk-pagination-item--next">
             <a class="nhsuk-back-link__link skip-link"
-               asp-action="SelfAssessmentCompetency"
-               asp-route-selfAssessmentId="@Model.Assessment.Id"
-               asp-route-competencyNumber="@(Model.CompetencyNumber + 1)">
+             asp-action="SelfAssessmentCompetency"
+             asp-route-selfAssessmentId="@Model.Assessment.Id"
+             asp-route-competencyNumber="@(Model.CompetencyNumber + 1)">
               <span class="nhsuk-pagination__page">Skip question</span>
               <span>
-              <svg class="nhsuk-icon nhsuk-icon__chevron-left" id="skip-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
-                <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-              </svg></span>
+                <svg class="nhsuk-icon nhsuk-icon__chevron-left" id="skip-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+                </svg>
+              </span>
             </a>
           </div>
         </div>
@@ -145,8 +146,8 @@
   {
     <div class="nhsuk-back-link nhsuk-grid-column-full">
       <a class="nhsuk-back-link__link"
-         asp-action="SelfAssessmentOverview"
-         asp-route-selfAssessmentId="@Model.Assessment.Id" asp-route-vocabulary="@Model.VocabPlural()" asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID" asp-fragment="comp-@Model.CompetencyNumber">
+       asp-action="SelfAssessmentOverview"
+       asp-route-selfAssessmentId="@Model.Assessment.Id" asp-route-vocabulary="@Model.VocabPlural()" asp-route-competencyGroupId="@Model.Competency.CompetencyGroupID" asp-fragment="comp-@Model.CompetencyNumber">
         <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
           <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
         </svg>Return to @Model.VocabPlural() home