Skip to content

Commit 5778127

Browse files
Feedback panel: Use fieldset and legend to group buttons (#261)
This should help, at least in VoiceOver. More testing required.
1 parent 4c2f905 commit 5778127

File tree

1 file changed

+27
-24
lines changed

1 file changed

+27
-24
lines changed

app/views/_feedback-panel.html

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,36 @@
88
<div data-module="feedback-panel__initial-question">
99
<h2 class="app-feedback-panel__title">You’ve just recorded your 5th vaccination.</h2>
1010

11-
<p>How have you found using this service?</p>
1211

13-
<div class="app-button-group nhsuk-u-margin-bottom-0">
14-
{{ button({
15-
text: "Easy",
16-
classes: "app-button--outlined app-button--small",
17-
attributes: {
18-
"data-thanks": "Thank you. Do you want to tell us more?"
19-
}
20-
}) }}
12+
<fieldset class="nhsuk-fieldset">
13+
<legend class="nhsuk-fieldset__legend nhsuk-u-margin-bottom-4">How have you found using this service?</legend>
2114

22-
{{ button({
23-
text: "Ok",
24-
classes: "app-button--outlined app-button--small",
25-
attributes: {
26-
"data-thanks": "Thank you. Do you want to tell us more?"
27-
}
28-
}) }}
15+
<div class="app-button-group nhsuk-u-margin-bottom-0">
16+
{{ button({
17+
text: "Easy",
18+
classes: "app-button--outlined app-button--small",
19+
attributes: {
20+
"data-thanks": "Thank you. Do you want to tell us more?"
21+
}
22+
}) }}
2923

30-
{{ button({
31-
text: "Hard",
32-
classes: "app-button--outlined app-button--small",
33-
attributes: {
34-
"data-thanks": "Thank you. Do you want to tell us more?"
35-
}
36-
}) }}
37-
</div>
24+
{{ button({
25+
text: "Ok",
26+
classes: "app-button--outlined app-button--small",
27+
attributes: {
28+
"data-thanks": "Thank you. Do you want to tell us more?"
29+
}
30+
}) }}
31+
32+
{{ button({
33+
text: "Hard",
34+
classes: "app-button--outlined app-button--small",
35+
attributes: {
36+
"data-thanks": "Thank you. Do you want to tell us more?"
37+
}
38+
}) }}
39+
</div>
40+
</fieldset>
3841
</div>
3942

4043
<div class="app-feedback-panel__comments" data-module="feedback-panel__comments" hidden>

0 commit comments

Comments
 (0)