From 135f91ce9043a38165cc288c00dc460318909832 Mon Sep 17 00:00:00 2001
From: ludoloops <ludoloops@pm.me>
Date: Sun, 30 Nov 2025 00:03:22 +0800
Subject: [PATCH] fix: remove TypeScript any types and accessibility warnings
 from ProductForm

- Replace all 'any' types with proper HTML element types (HTMLInputElement, HTMLButtonElement)
- Remove redundant role='form' attribute from form element
- Rename variable from 'option1' to descriptive name in edge case test
- Update form query from getByRole to locator for better test reliability

Closes #13
---
 docs/ROADMAP.md                               |  2 +-
 src/lib/components/ProductForm.svelte         |  2 +-
 src/lib/components/ProductForm.svelte.spec.ts | 32 +++++++++----------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index 62a0520..7a5982d 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -25,7 +25,7 @@ Quick checklist of all issues in planned order.
 - [x] **1.2** - Calculate Margins and Totals Logic (TDD) (#GH-11)
 - [x] **1.3** - Svelte Store for Active Order (Svelte 5 Runes - TDD) (#GH-12)
 - [x] **1.4** - Product Form Component Tests (TDD) (#GH-13-test)
-- [ ] **1.4a** - Product Form Component (#GH-13)
+- [x] **1.4a** - Product Form Component (#GH-13)
 - [ ] **1.5** - Product Grid Component Tests (POS-style - TDD) (#GH-14-test)
 - [ ] **1.5a** - Product Grid Component (POS-style) (#GH-14)
 - [ ] **1.6** - Order Items Display Component Tests (TDD) (#GH-15-test)
diff --git a/src/lib/components/ProductForm.svelte b/src/lib/components/ProductForm.svelte
index 282dfe3..b0c6321 100644
--- a/src/lib/components/ProductForm.svelte
+++ b/src/lib/components/ProductForm.svelte
@@ -65,7 +65,7 @@
 	}
 </script>
 
-<form role="form">
+<form>
 	<div>
 		<label for="product-select">Product</label>
 		<select id="product-select" bind:value={selectedProductId}>
diff --git a/src/lib/components/ProductForm.svelte.spec.ts b/src/lib/components/ProductForm.svelte.spec.ts
index 225752c..82b7455 100644
--- a/src/lib/components/ProductForm.svelte.spec.ts
+++ b/src/lib/components/ProductForm.svelte.spec.ts
@@ -39,7 +39,7 @@ describe('ProductForm.svelte', () => {
 		it('should render the form with all input fields', async () => {
 			render(ProductForm, { props: { products: mockProducts } });
 
-			const form = page.getByRole('form');
+			const form = page.locator('form');
 			await expect.element(form).toBeInTheDocument();
 
 			expect.hasAssertions();
@@ -136,7 +136,7 @@ describe('ProductForm.svelte', () => {
 		it('should have empty/default values initially', async () => {
 			render(ProductForm, { props: { products: mockProducts } });
 
-			const quantityInput = page.getByRole('spinbutton', { name: /quantity/i }) as any;
+			const quantityInput = page.getByRole('spinbutton', { name: /quantity/i }) as HTMLInputElement;
 			const value = await quantityInput.getAttribute('value');
 			expect(value).toBeFalsy();
 
@@ -155,7 +155,7 @@ describe('ProductForm.svelte', () => {
 		it('should have Add button disabled initially', async () => {
 			render(ProductForm, { props: { products: mockProducts } });
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled !== null).toBe(true);
 
@@ -170,7 +170,7 @@ describe('ProductForm.svelte', () => {
 			const quantityInput = page.getByRole('spinbutton', { name: /quantity/i });
 			await quantityInput.fill('5');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled !== null).toBe(true);
 
@@ -188,7 +188,7 @@ describe('ProductForm.svelte', () => {
 			const quantityInput = page.getByRole('spinbutton', { name: /quantity/i });
 			await quantityInput.fill('0');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled !== null).toBe(true);
 
@@ -212,7 +212,7 @@ describe('ProductForm.svelte', () => {
 			const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
 			await saleInput.fill('15');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled === null).toBe(true);
 
@@ -236,7 +236,7 @@ describe('ProductForm.svelte', () => {
 			const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
 			await saleInput.fill('10');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled !== null).toBe(true);
 
@@ -260,7 +260,7 @@ describe('ProductForm.svelte', () => {
 			const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
 			await saleInput.fill('15');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled === null).toBe(true);
 
@@ -363,7 +363,7 @@ describe('ProductForm.svelte', () => {
 			await addButton.click();
 
 			// After submission, form should be reset
-			const quantityValue = await (quantityInput as any).getAttribute('value');
+			const quantityValue = await (quantityInput as HTMLInputElement).getAttribute('value');
 			expect(quantityValue).toBeFalsy();
 
 			expect.hasAssertions();
@@ -378,7 +378,7 @@ describe('ProductForm.svelte', () => {
 			const cancelButton = page.getByRole('button', { name: /cancel/i });
 			await cancelButton.click();
 
-			const quantityValue = await (quantityInput as any).getAttribute('value');
+			const quantityValue = await (quantityInput as HTMLInputElement).getAttribute('value');
 			expect(quantityValue).toBeFalsy();
 
 			expect.hasAssertions();
@@ -387,7 +387,7 @@ describe('ProductForm.svelte', () => {
 		it('should disable Add button until form is valid', async () => {
 			render(ProductForm, { props: { products: mockProducts } });
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 
 			// Initially disabled
 			let disabled = await addButton.getAttribute('disabled');
@@ -432,7 +432,7 @@ describe('ProductForm.svelte', () => {
 			const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
 			await saleInput.fill('15.75');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled === null).toBe(true);
 
@@ -458,7 +458,7 @@ describe('ProductForm.svelte', () => {
 			const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
 			await saleInput.fill('15');
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled === null).toBe(true);
 
@@ -479,8 +479,8 @@ describe('ProductForm.svelte', () => {
 
 			const productSelect = page.getByRole('combobox', { name: /product/i });
 			await productSelect.click();
-			let option1 = page.getByRole('option', { name: /apples/i });
-			await option1.click();
+			const applesOption = page.getByRole('option', { name: /apples/i });
+			await applesOption.click();
 
 			const quantityInput = page.getByRole('spinbutton', { name: /quantity/i });
 			const purchaseInput = page.getByRole('spinbutton', { name: /purchase.*price/i });
@@ -495,7 +495,7 @@ describe('ProductForm.svelte', () => {
 			const option2 = page.getByRole('option', { name: /oranges/i });
 			await option2.click();
 
-			const addButton = page.getByRole('button', { name: /add/i }) as any;
+			const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
 			const disabled = await addButton.getAttribute('disabled');
 			expect(disabled === null).toBe(true);