Add hints to input components

communitiesuk · Dec 9, 2024 · 94a8271 · 94a8271
1 parent 5896482
commit 94a8271
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 21 deletions.
diff --git a/components/GovDropdown.vue b/components/GovDropdown.vue
@@ -22,13 +22,12 @@
 	<div :class="`govuk-form-group ${props.context.state.invalid &&
 		props.context.messages.rule_required &&
 		props.context.messages.rule_required.visible
-		? 'govuk-form-group--error'
-		: ''
-		}`">
+		? 'govuk-form-group--error' : '' }`"
+	>
 		<label class="govuk-label govuk-label--m" :for="id">
 			{{ label }}
 		</label>
-		<div id="event-name-hint" class="govuk-hint">
+		<div :id="`${id}_hint`" class="govuk-hint" v-if="help">
 			{{ help }}
 		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
@@ -41,7 +40,7 @@
 			@input="handleInput"
 			:value="mounted ? props.context._value : ''"
 			:data-testid="id"
-			:aria-describedby="props.context.state.invalid ? `${id}_error` : ''"
+			:aria-describedby="props.context.state.invalid ? `${id}_error` : help ? `${id}_hint` : ''"
 		>
 			<option v-for="key in Object.keys(options)" :value="key">
 				{{ options[key] }}

diff --git a/components/GovInputInt.vue b/components/GovInputInt.vue
@@ -6,7 +6,8 @@
 	const {
 		id,
 		node: { name },
-		label
+		label,
+		help
 	} = props.context;
 
 	const { mounted } = useMounted();
@@ -26,6 +27,9 @@
 		<label class="govuk-label govuk-label--m" :for="id">
 			{{ label }}
 		</label>
+		<div :id="`${id}_hint`" class="govuk-hint" v-if="help">
+			{{ help }}
+		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
 			<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required?.value }}
 		</p>
@@ -38,7 +42,7 @@
 				type="number"
 				:value="mounted ? props.context._value : ''"
 				:data-testid="id"
-				:aria-describedby="props.context.state.invalid ? `${id}_error` : ''"
+				:aria-describedby="props.context.state.invalid ? `${id}_error` : help ? `${id}_hint` : ''"
 			/>
 		</div>
 	</div>

diff --git a/components/GovInputMeters.vue b/components/GovInputMeters.vue
@@ -6,7 +6,8 @@
 	const {
 		id,
 		node: { name },
-		label
+		label,
+		help
 	} = props.context;
 
 	const { mounted } = useMounted();
@@ -18,14 +19,17 @@
 </script>
 <template>
 	<div :class="`govuk-form-group ${props.context.state.invalid &&
-			props.context.messages.rule_required &&
-			props.context.messages.rule_required.visible
-			? 'govuk-form-group--error'
-			: ''
-		}`">
+		props.context.messages.rule_required &&
+		props.context.messages.rule_required.visible
+		? 'govuk-form-group--error'
+		: ''}`"
+	>
 		<label class="govuk-label govuk-label--m" :for="id">
 			{{ label }}
 		</label>
+		<div :id="`${id}_hint`" class="govuk-hint" v-if="help">
+			{{ help }}
+		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
 			<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required?.value }}
 		</p>
@@ -38,7 +42,7 @@
 				type="number"
 				:value="mounted ? props.context._value : ''"
 				:data-testId="id"
-				:aria-describedby="props.context.state.invalid ? `${id}_error` : ''"
+				:aria-describedby="props.context.state.invalid ? `${id}_error` : help ? `${id}_hint` : ''"
 			/>
 			<div class="govuk-input__suffix" aria-hidden="true">m2</div>
 		</div>

diff --git a/components/GovRadios.vue b/components/GovRadios.vue
@@ -20,11 +20,15 @@
 
 <template>
 	<div :class="`govuk-form-group ${props.context.state.invalid ? 'govuk-form-group--error' : ''}`">
-		<fieldset :id="id" class="govuk-fieldset" :aria-describedby="props.context.state.invalid ? `${id}_error` : ''">
+		<fieldset
+			:id="id"
+			class="govuk-fieldset"
+			:aria-describedby="props.context.state.invalid ? `${id}_error` : help ? `${id}_hint` : ''"
+		>
 			<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
 				{{ label }}
 			</legend>
-			<div id="event-name-hint" class="govuk-hint">
+			<div :id="`${id}_hint`" class="govuk-hint" v-if="help">
 				{{ help }}
 			</div>
 			<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
@@ -41,10 +45,14 @@
 						:checked="mounted ? props.context._value == key : false"
 						@change="handleInput"
 						:data-testid="`${id}_${key}`"
+						:aria-describedby="typeof options[key] === 'object' ? `${id}_${key}_hint` : ''"
 					/>
 					<label class="govuk-label govuk-radios__label" :for="`${id}_${key}`">
-						{{ options[key] }}
+						{{ typeof options[key] === 'object' ? options[key].label : options[key] }}
 					</label>
+					<div :id="`${id}_${key}_hint`" class="govuk-hint govuk-radios__hint" v-if="(typeof options[key] === 'object')">
+						{{ options[key].hint }}
+					</div>
 				</div>
 			</div>
 		</fieldset>

diff --git a/formkit.config.ts b/formkit.config.ts
@@ -6,12 +6,17 @@ import GovDropdown from './components/GovDropdown.vue';
 import GovInputInt from './components/GovInputInt.vue';
 import GovInputMeters from './components/GovInputMeters.vue';
 
+type GovRadioOption = {
+	label: string;
+	hint?: string;
+}
+
 // Enable TypeScript support for custom inputs
 declare module '@formkit/inputs' {
     interface FormKitInputProps<Props extends FormKitInputs<Props>> {
         'govRadios': {
             type: 'govRadios',
-            options: FormKitOptionsProp
+            options: Record<string, string | GovRadioOption>
         },
         'govButton': {
             type: 'govButton'

diff --git a/pages/dwelling-details/general-specifications.vue b/pages/dwelling-details/general-specifications.vue
@@ -100,6 +100,7 @@
 			id="levelOfShelter"
 			name="levelOfShelter"
 			validation="required"
+			help="Exposure level of the dwelling"
 		/>
 		<FormKit
 			type="govInputInt"
@@ -111,8 +112,14 @@
 		<FormKit
 			type="govRadios"
 			:options="{
-				seperateTempControl: 'Separate temperature control',
-				seperateTempAndTimeControl: 'Separate temperature and time control ',
+				seperateTempControl: {
+					label: 'Separate temperature control',
+					hint: 'Both living and rest of dwelling zones follow the same schedule but have different temperature set points.'
+				},
+				seperateTempAndTimeControl: {
+					label: 'Separate temperature and time control',
+					hint: 'Each zone has heating schedule and temperature set points.'
+				},
 			}"
 			label="Heating control type"
 			id="heatingControlType"
@@ -132,7 +139,7 @@
 		/>
 		<FormKit
 			type="govRadios"
-				:options="{
+			:options="{
 				mainsWater: 'Mains water',
 				headerTank: 'Header tank',
 			}"
@@ -147,6 +154,7 @@
 			id="numOfADFWetRooms"
 			name="numOfADFWetRooms"
 			validation="required | number"
+			help="Rooms used for domestic activities such as kitchen and bathroom that create a large amount of airborne moisture."
 		/>
 		<FormKit type="govButton" label="Save and continue" />
 	</FormKit>