From 39c6442084a818e414f39739e23efe2378bd1ab3 Mon Sep 17 00:00:00 2001
From: kevwhitt-hee <kevin.whittaker@hee.nhs.uk>
Date: Fri, 18 Oct 2024 16:09:35 +0100
Subject: [PATCH 1/3] TD-4920 Removes the select all/deselect all checkboxes

---
 .../Scripts/learningPortal/selfAssessment.ts       |  4 ----
 .../ManageOptionalCompetencies.cshtml              | 14 ++------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/DigitalLearningSolutions.Web/Scripts/learningPortal/selfAssessment.ts b/DigitalLearningSolutions.Web/Scripts/learningPortal/selfAssessment.ts
index 9f98a2ec71..35325bcf79 100644
--- a/DigitalLearningSolutions.Web/Scripts/learningPortal/selfAssessment.ts
+++ b/DigitalLearningSolutions.Web/Scripts/learningPortal/selfAssessment.ts
@@ -1,5 +1,3 @@
-import * as Checkboxes from '../checkboxes';
-
 function onSliderUpdate(inputElement: HTMLInputElement) {
   const selectedRatio = parseInt(inputElement.value, 10) / parseInt(inputElement.max, 10);
   // eslint-disable-next-line no-param-reassign
@@ -15,5 +13,3 @@ inputs.forEach((e) => onSliderUpdate(e));
 inputs.forEach((e) => {
   e.addEventListener('change', () => onSliderUpdate(e));
 });
-
-Checkboxes.default.setUpSelectAndDeselectInGroupButtons();
diff --git a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
index c635dc4bc9..0caaac3b7e 100644
--- a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
+++ b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
@@ -94,7 +94,7 @@ else
                     {
 
                         <div class="nhsuk-checkboxes__item">
-                            <input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input select-all-checkbox" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
+                            <input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
                             <label class="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16" for="result-check-@competencyGroup.Key">
                                 <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
                                     <span class="nhsuk-fieldset__heading">
@@ -145,17 +145,11 @@ else
                                 @competencyGroup.Key
                             </span>
                         </legend>
-                        <div class="nhsuk-grid-row nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-1 js-only-block">
-                            <div class="nhsuk-grid-column-full">
-                                <a class="nhsuk-button select-all-button select-all status-tag  nhsuk-u-margin-bottom-1" role="button" data-group="@competencyGroup.Key" name="selectAll" value="true">Select all @Model.VocabPlural().ToLower()</a>
-                                <a class="nhsuk-button select-all-button deselect-all status-tag  nhsuk-u-margin-bottom-1" role="button" data-group="@competencyGroup.Key" id="" name="selectAll" value="false">Deselect all @Model.VocabPlural().ToLower()</a>
-                            </div>
-                        </div>
                         <div class="nhsuk-checkboxes">
                             @foreach (var competency in competencyGroup)
                             {
                                 <div class="nhsuk-checkboxes__item">
-                                    <input class="nhsuk-checkboxes__input select-all-checkbox" data-group="@competencyGroup.Key" id="competency-check-@competency.SelfAssessmentStructureId" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
+                                    <input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="competency-check-@competency.SelfAssessmentStructureId" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
                                     <label class="nhsuk-label nhsuk-checkboxes__label" for="competency-check-@competency.SelfAssessmentStructureId">
                                         @foreach (var flag in competency.CompetencyFlags)
                                         {
@@ -190,7 +184,3 @@ else
         Cancel
     </a>
 </div>
-
-@section scripts {
-    <script src="@Url.Content("~/js/learningPortal/selfAssessment.js")" asp-append-version="true"></script>
-}

From e952060d7fd18e73cfc3ecaa6eb746ec1708f28a Mon Sep 17 00:00:00 2001
From: kevwhitt-hee <kevin.whittaker@hee.nhs.uk>
Date: Mon, 21 Oct 2024 15:15:17 +0100
Subject: [PATCH 2/3] Fixes optional competencies page markup and styling

---
 .../Styles/learningPortal/selfAssessment.scss |   8 +-
 .../ManageOptionalCompetencies.cshtml         | 121 +++++++++---------
 2 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss b/DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss
index 2e3c6d798e..b6ae38acdb 100644
--- a/DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss
+++ b/DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss
@@ -54,10 +54,6 @@ details.nhsuk-details {
   }
 }
 
-.nhsuk-details__summary-text {
-  text-decoration: none;
-}
-
 .score {
   margin-left: 48px;
   color: $color_nhsuk-black;
@@ -247,3 +243,7 @@ details.nhsuk-details {
 .text-area-edit-90 {
   height: 90px
 }
+
+.heading-checkboxes__label {
+  padding: 4px 12px 4px;
+}
diff --git a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
index 0caaac3b7e..2c00220afb 100644
--- a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
+++ b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
@@ -8,11 +8,7 @@
     ViewData["SelfAssessmentTitle"] = @Model.SelfAssessment.Name;
     var backLinkData = Html.GetRouteValues();
 }
-<style>
-    .nhsuk-details__summary-text {
-        padding: 10px;
-    }
-</style>
+
 @if (ViewBag.FromAddOptionalPage != null)
 {
     @section breadcrumbs {
@@ -62,14 +58,12 @@ else
 }
 
 <link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
-<h1>Choose optional @Model.VocabPlural().ToLower()</h1>
+<h1>Optional @Model.VocabPlural().ToLower()</h1>
 @if (errorHasOccurred)
 {
     <vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
 }
-<h2>
-    <small>Which optional @Model.VocabPlural().ToLower() would you like to include in your self-assessment?</small>
-</h2>
+
 @if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
 {
     <div class="nhsuk-warning-callout">
@@ -82,68 +76,68 @@ else
         <div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
     </div>
 }
+<h2>
+    Select your optional @Model.VocabPlural().ToLower()
+</h2>
 <form method="post">
     <nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
         @foreach (var competencyGroup in Model.CompetencyGroups)
         {
-            <fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-4">
 
-                @if (competencyGroup.Count() > 1)
+
+            @if (competencyGroup.Count() > 1)
+            {
+                @if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
                 {
-                    @if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
-                    {
-
-                        <div class="nhsuk-checkboxes__item">
-                            <input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
-                            <label class="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16" for="result-check-@competencyGroup.Key">
-                                <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
-                                    <span class="nhsuk-fieldset__heading">
-                                        @competencyGroup.Key
+
+                    <div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
+                        <input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
+                        <label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="result-check-@competencyGroup.Key" aria-details="@competencyGroup.Key-details">
+                                <h3>
+                                    @competencyGroup.Key
+                                </h3>
+                        </label>
+                        <div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
+                            <details class="nhsuk-details">
+                                <summary class="nhsuk-details__summary">
+                                    <span class="nhsuk-details__summary-text">
+                                        What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
                                     </span>
-                                </legend>
-                            </label>
+                                </summary>
+
+                                <div class="nhsuk-details__text">
+                                    <ul>
+
+                                        @foreach (var competency in competencyGroup)
+                                        {
+                                            <li>
+
+                                                
+                                                    @foreach (var flag in competency.CompetencyFlags)
+                                                    {
+                                                        <span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
+                                                            <strong class="nhsuk-tag @flag.FlagTagClass">
+                                                                @flag.FlagName
+                                                            </strong>
+                                                        </span>
+                                                    }
+                                                    @competency.Name
+                                            </li>
+                                        }
+                                    </ul>
+                                </div>
+                            </details>
                         </div>
-                        <details class="nhsuk-details">
-                            <summary class="nhsuk-details__summary nhsuk-u-padding-0">
-                                <h3 class="nhsuk-details__summary-text nhsuk-u-margin-bottom-0">
-                                    <span class="nhsuk-u-margin-bottom-0">
-                                        <span class="nhsuk-details__summary-text" id="@competencyGroup.Key">
-                                            What&rsquo;s included in the @competencyGroup.Key
-                                        </span>
-                                    </span>
+                    </div>
 
-                                </h3>
-                            </summary>
-
-                            <div class="nhsuk-details__text nhsuk-card">
-                                <dl class="nhsuk-summary-list">
-
-                                    @foreach (var competency in competencyGroup)
-                                    {   <div class="nhsuk-summary-list__row">
-
-                                            <dd class="nhsuk-summary-list__value">
-                                                @foreach (var flag in competency.CompetencyFlags)
-                                                {
-                                                    <span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
-                                                        <strong class="nhsuk-tag @flag.FlagTagClass">
-                                                            @flag.FlagName
-                                                        </strong>
-                                                    </span>
-                                                }
-                                                @competency.Name
-                                            </dd>
-                                        </div>
-                                    }
-                                </dl>
-                            </div>
-                        </details>
-                    }
-                    else
-                    {
-                        <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
-                            <span class="nhsuk-fieldset__heading">
+                }
+                else
+                {
+                    <fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-6">
+                        <legend class="nhsuk-fieldset__legend">
+                            <h3>
                                 @competencyGroup.Key
-                            </span>
+                            </h3>
                         </legend>
                         <div class="nhsuk-checkboxes">
                             @foreach (var competency in competencyGroup)
@@ -166,9 +160,10 @@ else
 
                             }
                         </div>
-                    }
+                    </fieldset>
                 }
-            </fieldset>
+            }
+
         }
     </nhs-form-group>
     <button class="nhsuk-button" type="submit">Submit</button>

From fa0fe0d9ce327cd45c53b65841a0ea1ba4ce6784 Mon Sep 17 00:00:00 2001
From: kevwhitt-hee <kevin.whittaker@hee.nhs.uk>
Date: Mon, 21 Oct 2024 16:06:24 +0100
Subject: [PATCH 3/3] Fixes accessibility issues with use of multiple fieldsets
 for single question

---
 .../ManageOptionalCompetencies.cshtml         | 191 +++++++++---------
 1 file changed, 95 insertions(+), 96 deletions(-)

diff --git a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
index 2c00220afb..4e2aa69a85 100644
--- a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
+++ b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
@@ -63,112 +63,111 @@ else
 {
     <vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
 }
-
-@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
-{
-    <div class="nhsuk-warning-callout">
-        <h3 class="nhsuk-warning-callout__label">
-            <span role="text">
-                <span class="nhsuk-u-visually-hidden">Important: </span>
-                How to choose your optional @Model.VocabPlural().ToLower()
-            </span>
-        </h3>
-        <div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
-    </div>
-}
-<h2>
-    Select your optional @Model.VocabPlural().ToLower()
-</h2>
-<form method="post">
-    <nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
-        @foreach (var competencyGroup in Model.CompetencyGroups)
-        {
+<div class="nhsuk-u-reading-width">
+    @if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
+    {
+        <div class="nhsuk-warning-callout">
+            <h2 class="nhsuk-warning-callout__label">
+                <span role="text">
+                    <span class="nhsuk-u-visually-hidden">Important: </span>
+                    How to choose your optional @Model.VocabPlural().ToLower()
+                </span>
+            </h2>
+            <div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
+        </div>
+    }
+    <form method="post">
+        <nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
+            <fieldset class="nhsuk-fieldset">
+                <legend class="nhsuk-fieldset__legend">
+                    <h2>
+                        Select your optional @Model.VocabPlural().ToLower()
+                    </h2>
+                </legend>
 
 
-            @if (competencyGroup.Count() > 1)
-            {
-                @if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
+                @foreach (var competencyGroup in Model.CompetencyGroups)
                 {
+                    @if (competencyGroup.Count() > 1)
+                    {
+                        @if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
+                        {
+                            <div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
+                                <input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
+                                <label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="result-check-@competencyGroup.Key" aria-details="@competencyGroup.Key-details">
+                                    <h3 class="nhsuk-u-margin-bottom-2">
+                                        @competencyGroup.Key
+                                    </h3>
+                                </label>
+                                <div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
+                                    <details class="nhsuk-details">
+                                        <summary class="nhsuk-details__summary">
+                                            <span class="nhsuk-details__summary-text" role="button">
+                                                What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
+                                            </span>
+                                        </summary>
+
+                                        <div class="nhsuk-details__text">
+                                            <ul>
+
+                                                @foreach (var competency in competencyGroup)
+                                                {
+                                                    <li>
+                                                        @foreach (var flag in competency.CompetencyFlags)
+                                                        {
+                                                            <span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
+                                                                <strong class="nhsuk-tag @flag.FlagTagClass">
+                                                                    @flag.FlagName
+                                                                </strong>
+                                                            </span>
+                                                        }
+                                                        @competency.Name
+                                                    </li>
+                                                }
+                                            </ul>
+                                        </div>
+                                    </details>
+                                </div>
+                            </div>
 
-                    <div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
-                        <input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="result-check-@competencyGroup.Key" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
-                        <label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="result-check-@competencyGroup.Key" aria-details="@competencyGroup.Key-details">
+                        }
+                        else
+                        {
+                            <div class="nhsuk-u-margin-bottom-6">
                                 <h3>
                                     @competencyGroup.Key
                                 </h3>
-                        </label>
-                        <div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
-                            <details class="nhsuk-details">
-                                <summary class="nhsuk-details__summary">
-                                    <span class="nhsuk-details__summary-text">
-                                        What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
-                                    </span>
-                                </summary>
-
-                                <div class="nhsuk-details__text">
-                                    <ul>
-
-                                        @foreach (var competency in competencyGroup)
-                                        {
-                                            <li>
-
-                                                
-                                                    @foreach (var flag in competency.CompetencyFlags)
-                                                    {
-                                                        <span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
-                                                            <strong class="nhsuk-tag @flag.FlagTagClass">
-                                                                @flag.FlagName
-                                                            </strong>
-                                                        </span>
-                                                    }
-                                                    @competency.Name
-                                            </li>
-                                        }
-                                    </ul>
-                                </div>
-                            </details>
-                        </div>
-                    </div>
-
-                }
-                else
-                {
-                    <fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-6">
-                        <legend class="nhsuk-fieldset__legend">
-                            <h3>
-                                @competencyGroup.Key
-                            </h3>
-                        </legend>
-                        <div class="nhsuk-checkboxes">
-                            @foreach (var competency in competencyGroup)
-                            {
-                                <div class="nhsuk-checkboxes__item">
-                                    <input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="competency-check-@competency.SelfAssessmentStructureId" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
-                                    <label class="nhsuk-label nhsuk-checkboxes__label" for="competency-check-@competency.SelfAssessmentStructureId">
-                                        @foreach (var flag in competency.CompetencyFlags)
-                                        {
-                                            <span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
-                                                <strong class="nhsuk-tag @flag.FlagTagClass">
-                                                    @flag.FlagName
-                                                </strong>
-                                            </span>
-                                        }
-
-                                        @competency.Name
-                                    </label>
+                                <div class="nhsuk-checkboxes">
+                                    @foreach (var competency in competencyGroup)
+                                    {
+                                        <div class="nhsuk-checkboxes__item">
+                                            <input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="competency-check-@competency.SelfAssessmentStructureId" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
+                                            <label class="nhsuk-label nhsuk-checkboxes__label" for="competency-check-@competency.SelfAssessmentStructureId">
+                                                @foreach (var flag in competency.CompetencyFlags)
+                                                {
+                                                    <span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
+                                                        <strong class="nhsuk-tag @flag.FlagTagClass">
+                                                            @flag.FlagName
+                                                        </strong>
+                                                    </span>
+                                                }
+
+                                                @competency.Name
+                                            </label>
+                                        </div>
+
+                                    }
                                 </div>
+                            </div>
+                        }
+                    }
 
-                            }
-                        </div>
-                    </fieldset>
                 }
-            }
-
-        }
-    </nhs-form-group>
-    <button class="nhsuk-button" type="submit">Submit</button>
-</form>
-
+            </fieldset>
+        </nhs-form-group>
+        <button class="nhsuk-button" type="submit">Submit</button>
+    </form>
+</div>
 <div class="nhsuk-back-link">
     <a class="nhsuk-back-link__link"
        asp-action="SelfAssessmentOverview"