From 9d8acc84c88b0b5dcb1796d54e603535af82e38e Mon Sep 17 00:00:00 2001
From: Tim Dalton <daltont@objectcomputing.com>
Date: Wed, 31 Dec 2025 10:57:08 -0600
Subject: [PATCH] Libre311 Accessibility Issue #58 + #59

#58 - The request type and description inputs do not have a label.

#59 - The phone error message does not show the expected phone number format.

I added some verbiage about region format since 999-999-9999 is invalid despite being the right format.

Signed-off-by: Tim Dalton <daltont@objectcomputing.com>
---
 .../CreateServiceRequest/SelectARequestCategory.svelte   | 7 ++++++-
 .../ServiceRequestDetailsForm.svelte                     | 9 +++++++--
 frontend/src/lib/utils/validation.ts                     | 4 +++-
 frontend/src/media/messages.json                         | 4 +++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/CreateServiceRequest/SelectARequestCategory.svelte b/frontend/src/lib/components/CreateServiceRequest/SelectARequestCategory.svelte
index 641c1652..64a4f115 100644
--- a/frontend/src/lib/components/CreateServiceRequest/SelectARequestCategory.svelte
+++ b/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} />
diff --git a/frontend/src/lib/components/CreateServiceRequest/ServiceRequestDetailsForm.svelte b/frontend/src/lib/components/CreateServiceRequest/ServiceRequestDetailsForm.svelte
index 5233b6ca..354815f4 100644
--- a/frontend/src/lib/components/CreateServiceRequest/ServiceRequestDetailsForm.svelte
+++ b/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>
diff --git a/frontend/src/lib/utils/validation.ts b/frontend/src/lib/utils/validation.ts
index dd69612d..bfded3a2 100644
--- a/frontend/src/lib/utils/validation.ts
+++ b/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();
diff --git a/frontend/src/media/messages.json b/frontend/src/media/messages.json
index 0aed8c75..6bba09be 100644
--- a/frontend/src/media/messages.json
+++ b/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:",