Skip to content

Commit fa0fe0d

Browse files
kevwhitt-heekevwhitt-hee
committed
Fixes accessibility issues with use of multiple fieldsets for single question
1 parent e952060 commit fa0fe0d

File tree

1 file changed

+95
-96
lines changed

1 file changed

+95
-96
lines changed

‎DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml‎

Lines changed: 95 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -63,112 +63,111 @@ else
6363
{
6464
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
6565
}
66-
67-
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
68-
{
69-
<div class="nhsuk-warning-callout">
70-
<h3 class="nhsuk-warning-callout__label">
71-
<span role="text">
72-
<span class="nhsuk-u-visually-hidden">Important: </span>
73-
How to choose your optional @Model.VocabPlural().ToLower()
74-
</span>
75-
</h3>
76-
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
77-
</div>
78-
}
79-
<h2>
80-
Select your optional @Model.VocabPlural().ToLower()
81-
</h2>
82-
<form method="post">
83-
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
84-
@foreach (var competencyGroup in Model.CompetencyGroups)
85-
{
66+
<div class="nhsuk-u-reading-width">
67+
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
68+
{
69+
<div class="nhsuk-warning-callout">
70+
<h2 class="nhsuk-warning-callout__label">
71+
<span role="text">
72+
<span class="nhsuk-u-visually-hidden">Important: </span>
73+
How to choose your optional @Model.VocabPlural().ToLower()
74+
</span>
75+
</h2>
76+
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
77+
</div>
78+
}
79+
<form method="post">
80+
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
81+
<fieldset class="nhsuk-fieldset">
82+
<legend class="nhsuk-fieldset__legend">
83+
<h2>
84+
Select your optional @Model.VocabPlural().ToLower()
85+
</h2>
86+
</legend>
8687

8788

88-
@if (competencyGroup.Count() > 1)
89-
{
90-
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
89+
@foreach (var competencyGroup in Model.CompetencyGroups)
9190
{
91+
@if (competencyGroup.Count() > 1)
92+
{
93+
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
94+
{
95+
<div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
96+
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="[email protected]" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
97+
<label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="[email protected]" aria-details="@competencyGroup.Key-details">
98+
<h3 class="nhsuk-u-margin-bottom-2">
99+
@competencyGroup.Key
100+
</h3>
101+
</label>
102+
<div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
103+
<details class="nhsuk-details">
104+
<summary class="nhsuk-details__summary">
105+
<span class="nhsuk-details__summary-text" role="button">
106+
What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
107+
</span>
108+
</summary>
109+
110+
<div class="nhsuk-details__text">
111+
<ul>
112+
113+
@foreach (var competency in competencyGroup)
114+
{
115+
<li>
116+
@foreach (var flag in competency.CompetencyFlags)
117+
{
118+
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
119+
<strong class="nhsuk-tag @flag.FlagTagClass">
120+
@flag.FlagName
121+
</strong>
122+
</span>
123+
}
124+
@competency.Name
125+
</li>
126+
}
127+
</ul>
128+
</div>
129+
</details>
130+
</div>
131+
</div>
92132

93-
<div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
94-
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="[email protected]" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
95-
<label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="[email protected]" aria-details="@competencyGroup.Key-details">
133+
}
134+
else
135+
{
136+
<div class="nhsuk-u-margin-bottom-6">
96137
<h3>
97138
@competencyGroup.Key
98139
</h3>
99-
</label>
100-
<div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
101-
<details class="nhsuk-details">
102-
<summary class="nhsuk-details__summary">
103-
<span class="nhsuk-details__summary-text">
104-
What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
105-
</span>
106-
</summary>
107-
108-
<div class="nhsuk-details__text">
109-
<ul>
110-
111-
@foreach (var competency in competencyGroup)
112-
{
113-
<li>
114-
115-
116-
@foreach (var flag in competency.CompetencyFlags)
117-
{
118-
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
119-
<strong class="nhsuk-tag @flag.FlagTagClass">
120-
@flag.FlagName
121-
</strong>
122-
</span>
123-
}
124-
@competency.Name
125-
</li>
126-
}
127-
</ul>
128-
</div>
129-
</details>
130-
</div>
131-
</div>
132-
133-
}
134-
else
135-
{
136-
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-6">
137-
<legend class="nhsuk-fieldset__legend">
138-
<h3>
139-
@competencyGroup.Key
140-
</h3>
141-
</legend>
142-
<div class="nhsuk-checkboxes">
143-
@foreach (var competency in competencyGroup)
144-
{
145-
<div class="nhsuk-checkboxes__item">
146-
<input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="[email protected]" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
147-
<label class="nhsuk-label nhsuk-checkboxes__label" for="[email protected]">
148-
@foreach (var flag in competency.CompetencyFlags)
149-
{
150-
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
151-
<strong class="nhsuk-tag @flag.FlagTagClass">
152-
@flag.FlagName
153-
</strong>
154-
</span>
155-
}
156-
157-
@competency.Name
158-
</label>
140+
<div class="nhsuk-checkboxes">
141+
@foreach (var competency in competencyGroup)
142+
{
143+
<div class="nhsuk-checkboxes__item">
144+
<input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="[email protected]" name="IncludedSelfAssessmentStructureIds" checked="@(Model.IncludedSelfAssessmentStructureIds != null ? Model.IncludedSelfAssessmentStructureIds.Contains((int)competency.SelfAssessmentStructureId) : false)" type="checkbox" value="@competency.SelfAssessmentStructureId">
145+
<label class="nhsuk-label nhsuk-checkboxes__label" for="[email protected]">
146+
@foreach (var flag in competency.CompetencyFlags)
147+
{
148+
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
149+
<strong class="nhsuk-tag @flag.FlagTagClass">
150+
@flag.FlagName
151+
</strong>
152+
</span>
153+
}
154+
155+
@competency.Name
156+
</label>
157+
</div>
158+
159+
}
159160
</div>
161+
</div>
162+
}
163+
}
160164

161-
}
162-
</div>
163-
</fieldset>
164165
}
165-
}
166-
167-
}
168-
</nhs-form-group>
169-
<button class="nhsuk-button" type="submit">Submit</button>
170-
</form>
171-
166+
</fieldset>
167+
</nhs-form-group>
168+
<button class="nhsuk-button" type="submit">Submit</button>
169+
</form>
170+
</div>
172171
<div class="nhsuk-back-link">
173172
<a class="nhsuk-back-link__link"
174173
asp-action="SelfAssessmentOverview"

0 commit comments

Comments
 (0)