Skip to content

Commit f74483e

Browse files
GeoffreyHaywardGeoffreyHayward
authored
[WSP-283] Links each form hint to its input field (#2747)
1 parent af2104a commit f74483e

File tree

4 files changed

+93
-81
lines changed

4 files changed

+93
-81
lines changed

‎repository-data/webfiles/src/main/resources/site/freemarker/common/eforms/eforms-custom-field-renderer.ftl‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,16 @@
3434
<div class="${fieldClassName}">
3535
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
3636
<input type="text" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="${field.styleClass!}" autocomplete="off" value="${field.value!}"
37-
<#if (field.length > 0)>size="${field.length}"</#if> <#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if> />
37+
<#if (field.length > 0)>size="${field.length}"</#if> <#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" />
3838
<@renderError errorMessage = error />
39-
<span class="eforms-hint">${field.hint!}</span>
39+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
4040
</div>
4141
<#elseif field.type == "custompostcodefield">
4242
<div class="${fieldClassName}">
4343
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
44-
<input type="text" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="${field.styleClass!}" autocomplete="off" value="${field.value!}"/>
44+
<input type="text" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="${field.styleClass!}" autocomplete="off" value="${field.value!}" aria-describedby="${field.formRelativeUniqueName}-hint"/>
4545
<@renderError errorMessage = error />
46-
<span class="eforms-hint">${field.hint!}</span>
46+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
4747
</div>
4848

4949
<#elseif field.type == "customdatefield">
@@ -61,7 +61,8 @@
6161

6262
<input type="text" name="${field.formRelativeUniqueName}"
6363
id="date__DD" class="${field.styleClass!}"
64-
autocomplete="off" value="${field.value!}" size="1"/>
64+
autocomplete="off" value="${field.value!}" size="1"
65+
aria-describedby="${field.formRelativeUniqueName}-hint"/>
6566
</div>
6667

6768
<div style="margin-right: 12px;margin-top: 0px">
@@ -72,7 +73,8 @@
7273
id="date__MM"
7374
class="${field.styleClass!}"
7475
autocomplete="off" value="${field.value!}"
75-
size="1"/>
76+
size="1"
77+
aria-describedby="${field.formRelativeUniqueName}-hint"/>
7678
</div>
7779

7880
<div class="nhsd-m-date-input-year" style="margin-top: 0px">
@@ -82,7 +84,8 @@
8284
<input type="text" name="${field.formRelativeUniqueName}"
8385
id="date__YYYY"
8486
class="${field.styleClass!}"
85-
autocomplete="off" value="${field.value!}" size="3"/>
87+
autocomplete="off" value="${field.value!}" size="3"
88+
aria-describedby="${field.formRelativeUniqueName}-hint"/>
8689
</div>
8790
<input type="hidden" name="${field.formRelativeUniqueName}"
8891
class="visually-hidden"
@@ -91,7 +94,7 @@
9194
<@renderError errorMessage = error />
9295

9396
</div>
94-
<span class="eforms-hint">${field.hint!}</span>
97+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
9598
</div>
9699

97100

@@ -101,38 +104,40 @@
101104
<div class="${fieldClassName}">
102105
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
103106
<input type="password" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" autocomplete="off" class="${field.styleClass!}"
104-
<#if (field.length > 0)>size="${field.length}"</#if> <#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if> />
107+
<#if (field.length > 0)>size="${field.length}"</#if> <#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" />
105108
<@renderError errorMessage = error />
106-
<span class="eforms-hint">${field.hint!}</span>
109+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
107110
</div>
108111
<#elseif field.type == "textarea">
109112
<div class="${fieldClassName}">
110113
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
111114
<textarea name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" autocomplete="off" class="${field.styleClass!}"
112115
cols="${field.cols}" rows="${field.rows}"
113-
<#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if>>${field.value!}</textarea>
116+
<#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if>
117+
aria-describedby="${field.formRelativeUniqueName}-hint">${field.value!}</textarea>
114118
<@renderError errorMessage = error />
115-
<span class="eforms-hint">${field.hint!}</span>
119+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
116120
</div>
117121
<#elseif field.type == "dropdown">
118122
<div class="${fieldClassName}">
119123
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
120-
<select name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="${field.styleClass!}">
124+
<select name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="${field.styleClass!}" aria-describedby="${field.formRelativeUniqueName}-hint">
121125
<#list field.options as option>
122126
<option value="${option.value!}" <#if option.selected>selected="selected"</#if>>${option.text!}</option>
123127
</#list>
124128
</select>
125129
<@renderError errorMessage = error />
126-
<span class="eforms-hint">${field.hint!}</span>
130+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
127131
</div>
128132
<#elseif field.type == "fileuploadfield">
129133
<div class="${fieldClassName}">
130134
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
131135
<input type="file" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="${field.styleClass!}"
132136
data-validate="fileSizeAndExtension" data-max-size="${field.maxUploadSize}"
133-
data-allowed-extensions="<#if field.fileExtensions?? && (field.fileExtensions?size > 0)>${field.fileExtensions?join(",")}</#if>" />
137+
data-allowed-extensions="<#if field.fileExtensions?? && (field.fileExtensions?size > 0)>${field.fileExtensions?join(",")}</#if>"
138+
aria-describedby="${field.formRelativeUniqueName}-hint" />
134139
<@renderError errorMessage = error />
135-
<span class="eforms-hint">${field.hint!}</span>
140+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
136141
</div>
137142

138143
<#elseif field.type == "datefield">
@@ -142,9 +147,9 @@
142147
</#if>
143148

144149
<label for="${field.formRelativeUniqueName}" class="eforms-label">${field.label!}<span class="eforms-req">${field.requiredMarker!}</span></label>
145-
<input type="text" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="date ${field.styleClass!}" value="${value!}" autocomplete="off" />
150+
<input type="text" name="${field.formRelativeUniqueName}" id="${field.formRelativeUniqueName}" class="date ${field.styleClass!}" value="${value!}" autocomplete="off" aria-describedby="${field.formRelativeUniqueName}-hint" />
146151
<@renderError errorMessage = error />
147-
<span class="eforms-hint">${field.hint!}</span>
152+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
148153
</div>
149154
<#elseif field.type == "radiogroup">
150155
<div class="${fieldClassName}">
@@ -153,23 +158,23 @@
153158
<#list field.fields as radio>
154159
<li>
155160
<label for="${slugify(field.formRelativeUniqueName)}-${slugify(radio.value!)}">
156-
<input type="radio" name="${field.formRelativeUniqueName}" id="${slugify(field.formRelativeUniqueName)}-${slugify(radio.value!)}" class="${radio.styleClass!}" value="${radio.value!}" <#if radio.checked>checked="true"</#if> />
161+
<input type="radio" name="${field.formRelativeUniqueName}" id="${slugify(field.formRelativeUniqueName)}-${slugify(radio.value!)}" class="${radio.styleClass!}" value="${radio.value!}" <#if radio.checked>checked="true"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" />
157162
${radio.label!}
158163
</label>
159164
</li>
160165
</#list>
161166
<#if field.allowOther>
162167
<li>
163168
<label for="${slugify(field.formRelativeUniqueName)}-${slugify(field.renderOtherValue!)}">
164-
<input type="radio" name="${field.formRelativeUniqueName}" id="${slugify(field.formRelativeUniqueName)}-${slugify(field.renderOtherValue!)}" class="${field.styleClass!}" value="${field.renderOtherValue!}" <#if field.otherValue>checked="true"</#if> /> Other:
169+
<input type="radio" name="${field.formRelativeUniqueName}" id="${slugify(field.formRelativeUniqueName)}-${slugify(field.renderOtherValue!)}" class="${field.styleClass!}" value="${field.renderOtherValue!}" <#if field.otherValue>checked="true"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" /> Other:
165170
</label>
166171
<input type="text" value="<#if field.otherValue>${field.value!}</#if>" name="${field.otherFieldName!}" id="${slugify(field.formRelativeUniqueName)}-${slugify(field.otherFieldName!)}" autocomplete="off" class="textfield-other" <#if (field.length > 0)>size="${field.length}"</#if> <#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if> />
167172
<label for="${slugify(field.formRelativeUniqueName)}-${slugify(field.otherFieldName!)}" class="visually-hidden">Other:</label>
168173
</li>
169174
</#if>
170175
</ul>
171176
<@renderError errorMessage = error />
172-
<span class="eforms-hint">${field.hint!}</span>
177+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
173178
</div>
174179
<#elseif field.type == "checkboxgroup">
175180
<div class="${fieldClassName}">
@@ -179,15 +184,15 @@
179184
<li>
180185
<label for="${slugify(checkbox.formRelativeUniqueName)}-${slugify(checkbox.value)}">
181186
<input type="checkbox" name="${checkbox.formRelativeUniqueName}" id="${slugify(checkbox.formRelativeUniqueName)}-${slugify(checkbox.value)}" class="${checkbox.styleClass!}" value="${checkbox.value!}"
182-
<#if checkbox.checked>checked="true"</#if> />${checkbox.label!}
187+
<#if checkbox.checked>checked="true"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" />${checkbox.label!}
183188
</label>
184189
</li>
185190
</#list>
186191
<#if field.allowOther>
187192
<li>
188193
<label for="${slugify(field.formRelativeUniqueName)}-${slugify(field.renderOtherValue!)}" >
189194
<input type="checkbox" name="${field.formRelativeUniqueName}" id="${slugify(field.formRelativeUniqueName)}-${slugify(field.renderOtherValue!)}" class="${field.styleClass!}" value="${field.renderOtherValue!}"
190-
<#if field.otherValue>checked="true"</#if> />Other:
195+
<#if field.otherValue>checked="true"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" />Other:
191196
</label>
192197
<input type="text" value="<#if field.otherValue>${field.value!}</#if>" name="${field.otherFieldName!}" id="${slugify(field.formRelativeUniqueName)}-${slugify(field.otherFieldName!)}" autocomplete="off" class="textfield-other"
193198
<#if (field.length > 0)>size="${field.length}"</#if> <#if (field.minLength > 0)>minlength="${removeCommas(field.minLength)}"</#if> <#if (field.maxLength > 0)>maxlength="${removeCommas(field.maxLength)}"</#if> />
@@ -196,7 +201,7 @@
196201
</#if>
197202
</ul>
198203
<@renderError errorMessage = error />
199-
<span class="eforms-hint">${field.hint!}</span>
204+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
200205
</div>
201206
<#elseif field.type == "likert">
202207
<div class="${fieldClassName}">
@@ -217,15 +222,15 @@
217222
<#list pair.value as radio>
218223
<td>
219224
<input type="radio" name="${radio.formRelativeUniqueName}" id="${slugify(radio.formRelativeUniqueName)}-${slugify(radio.value)}" class="${radio.styleClass!}" value="${radio.value!}"
220-
<#if radio.checked>checked="true"</#if> />
225+
<#if radio.checked>checked="true"</#if> aria-describedby="${field.formRelativeUniqueName}-hint" />
221226
<label for="${slugify(radio.formRelativeUniqueName)}-${slugify(radio.value)}" class="visually-hidden">${radio.value!}</label>
222227
</td>
223228
</#list>
224229
</tr>
225230
</#list>
226231
</table>
227232
<@renderError errorMessage = error />
228-
<span class="eforms-hint">${field.hint!}</span>
233+
<span class="eforms-hint" id="${field.formRelativeUniqueName}-hint">${field.hint!}</span>
229234
</div>
230235

231236
</#if>

‎repository-data/webfiles/src/main/resources/site/freemarker/common/eforms/eforms-default.ftl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
<#assign groupCssClassName = "eforms-fieldgroup oneline">
8888
</#if>
8989

90-
<fieldset name="${fieldItem.fieldNamePrefix!}" class="${groupCssClassName!}">
90+
<fieldset name="${fieldItem.fieldNamePrefix!}" class="${groupCssClassName!}" <#if fieldItem.hint??>aria-describedby="${fieldItem.fieldNamePrefix!}-hint"</#if>>
9191
<#if fieldItem.label?has_content>
9292
<legend class="eforms-fieldgroupname">${fieldItem.label}</legend>
9393
</#if>
@@ -96,7 +96,7 @@
9696
<@fieldRenderer.renderField field=fieldItemInGroup error=fieldError />
9797
</#list>
9898
<#if fieldItem.hint??>
99-
<span class="eforms-hint">${fieldItem.hint}</span>
99+
<span class="eforms-hint" id="${fieldItem.fieldNamePrefix!}-hint">${fieldItem.hint}</span>
100100
</#if>
101101
</fieldset>
102102
<#else>

0 commit comments

Comments
 (0)