Libre311 Accessibility Issue #58 + #59

frontend/src/lib/components/CreateServiceRequest/SelectARequestCategory.svelte

@@ -16,6 +16,7 @@
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { arrowPath } from '../Svg/outline/arrowPath';
 	import type { CreateServiceRequestUIParams } from './shared';
+	import messages from '$media/messages.json';
 
 	export let params: Partial<CreateServiceRequestUIParams>;
 
@@ -67,11 +68,15 @@
 	{@const selectOptions = createSelectOptions(serviceList.value)}
 	<Select
 		name="select-1"
-		placeholder="Request Type"
+		placeholder={messages['serviceRequest']['request_type']}
 		on:change={issueTypeChange}
 		options={selectOptions}
 		class="relative my-4"
 	>
+		<Select.Label slot="label">
+			<strong class="text-base">{messages['serviceRequest']['request_type']}:</strong>
+		</Select.Label>
+
 		<Select.Options slot="options">
 			{#each selectOptions as option}
 				<Select.Options.Option {option} />

frontend/src/lib/components/CreateServiceRequest/ServiceRequestDetailsForm.svelte

@@ -22,6 +22,7 @@
 	import type { CreateServiceRequestUIParams, StepChangeEvent } from './shared';
 	import StepControls from './StepControls.svelte';
 	import type { Service } from '$lib/services/Libre311/Libre311';
+	import messages from '$media/messages.json';
 
 	export let params: Partial<CreateServiceRequestUIParams>;
 
@@ -145,9 +146,13 @@
 				<TextArea
 					bind:value={params.description}
 					name="comments"
-					placeholder="Description"
+					placeholder={messages['serviceRequest']['description']}
 					class="relative  my-4"
-				/>
+				>
+					<TextArea.Label slot="label">
+						<strong class="text-base">{messages['serviceRequest']['description']}:</strong>
+					</TextArea.Label>
+				</TextArea>
 			</div>
 		{/if}
 	</div>

frontend/src/lib/utils/validation.ts

@@ -1,5 +1,7 @@
 import { z, ZodError } from 'zod';
 import libphonenumber from 'google-libphonenumber';
+import messages from '$media/messages.json';
+
 import {
 	ServiceRequestPrioritySchema,
 	ServiceRequestStatusSchema
@@ -95,7 +97,7 @@ export const optionalCoalescePhoneNumberValidator = inputValidatorFactory(
 			.superRefine((val, ctx) => {
 				const defaultErr = {
 					code: z.ZodIssueCode.custom,
-					message: 'Phone number is invalid'
+					message: `Phone number needs to be valid for the region in format: ${messages['contact']['phone']['placeholder']}`
 				};
 				try {
 					const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();

frontend/src/media/messages.json

@@ -33,10 +33,12 @@
 		"description": "Description:",
 		"detail": "Details:",
 		"attributes": "Attributes:",
-		"citizen_contact": "Citizen Contact:",
 		"agency_contact": "Agency Contact:",
 		"agency_name": "agency name",
+		"citizen_contact": "Citizen Contact:",
+		"description": "Description",
 		"expected_datetime": "Estimated Fix:",
+		"request_type": "Request Type",
 		"service_notice": "Recommended Solution:",
 		"service_notice_placeholder": "proposed service",
 		"status_notes": "Notes:",