Fix label on roster for loop (#846)

Co-authored-by: Dylan Decrulle <[email protected]>
InseeFr · Jan 16, 2024 · a6661fd · a6661fd
1 parent f5b7fbf
commit a6661fd
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/e2e/loop.spec.ts b/e2e/loop.spec.ts
@@ -6,7 +6,7 @@ loopTypes.forEach((loopType) => {
 	test(`can complete a simple ${loopType.split('--')[0]}`, async ({ page }) => {
 		await goToStory(page, `components-loop-${loopType}`);
 		await page.locator('#prenom-0').fill('John');
-		await page.getByRole('button', { name: 'Ajouter un individu' }).click();
+		await page.getByRole('button', { name: 'Add row' }).click();
 		await page.locator('#prenom-1').fill('Jane');
 		await page.getByRole('button', { name: 'Next' }).click();
 		await page.getByLabel('John, quel est vôtre âge ?').fill('18');

diff --git a/e2e/pairwise.spec.ts b/e2e/pairwise.spec.ts
@@ -13,7 +13,7 @@ for (const [label, story] of stories) {
 	test(`can complete ${label} form`, async ({ page }) => {
 		await goToStory(page, story);
 		await page.getByLabel('Prénom').nth(2).fill('Marc');
-		await page.getByRole('button', { name: 'Ajouter un individu' }).click();
+		await page.getByRole('button', { name: 'Add row' }).click();
 		await page.getByLabel('Prénom').nth(3).fill('Jane');
 		await gotoNextPage(page, 4);
 		await page.getByLabel('Âge de Jane').click();

diff --git a/src/components/loop/block-for-loop.tsx b/src/components/loop/block-for-loop.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import D from '../../i18n';
 import { times } from '../../utils/array';
-import { createCustomizableLunaticField } from '../commons';
+import { createCustomizableLunaticField, Label } from '../commons';
 import {
 	DeclarationsAfterText,
 	DeclarationsBeforeText,
@@ -65,6 +65,9 @@ export const BlockForLoop = createCustomizableLunaticField<
 
 	return (
 		<>
+			<Label htmlFor={id} id={`label-${id}`}>
+				{label}
+			</Label>
 			<DeclarationsBeforeText declarations={declarations} id={id} />
 			<DeclarationsAfterText declarations={declarations} id={id} />
 			{times(nbRows, (n) => (
@@ -79,7 +82,7 @@ export const BlockForLoop = createCustomizableLunaticField<
 			{canControlRows && (
 				<>
 					<LoopButton onClick={addRow} disabled={nbRows === max}>
-						{label || D.DEFAULT_BUTTON_ADD}
+						{D.DEFAULT_BUTTON_ADD}
 					</LoopButton>
 					<LoopButton onClick={removeRow} disabled={nbRows === 1}>
 						{D.DEFAULT_BUTTON_REMOVE}

diff --git a/src/components/loop/roster-for-loop/__snapshots__/roster-for-loop.spec.tsx.snap b/src/components/loop/roster-for-loop/__snapshots__/roster-for-loop.spec.tsx.snap
@@ -2,6 +2,13 @@
 
 exports[`RosterForLoop > renders the right number of columns 1`] = `
 <div>
+  <label
+    class="lunatic-label"
+    for="table"
+    id="label-table"
+  >
+    Ceci est un test
+  </label>
   <table
     class="lunatic-table"
     id="table-table"
@@ -77,7 +84,7 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
   <input
     class="button-lunatic"
     type="button"
-    value="Ceci est un test"
+    value="Add row"
   />
   <input
     class="button-lunatic"

diff --git a/src/components/loop/roster-for-loop/roster-for-loop.tsx b/src/components/loop/roster-for-loop/roster-for-loop.tsx
@@ -5,7 +5,7 @@ import {
 	DeclarationsBeforeText,
 	DeclarationsDetachable,
 } from '../../declarations';
-import { createCustomizableLunaticField, Errors } from '../../commons';
+import { createCustomizableLunaticField, Errors, Label } from '../../commons';
 import { LoopButton } from '../loop-button';
 import D from '../../../i18n';
 import type { LunaticComponentProps } from '../../type';
@@ -30,11 +30,11 @@ export const RosterForLoop = createCustomizableLunaticField<
 		lines,
 		handleChange,
 		declarations,
-		label,
 		header,
 		iterations,
 		id,
 		getComponents,
+		label,
 		...otherProps // These props will be passed down to the child components
 	} = props;
 	const min = lines?.min || DEFAULT_MIN_ROWS;
@@ -65,9 +65,11 @@ export const RosterForLoop = createCustomizableLunaticField<
 	}
 
 	let cols = 0;
-
 	return (
 		<>
+			<Label htmlFor={id} id={`label-${id}`}>
+				{label}
+			</Label>
 			<DeclarationsBeforeText declarations={declarations} id={id} />
 			<DeclarationsAfterText declarations={declarations} id={id} />
 			<Table id={id}>
@@ -118,7 +120,7 @@ export const RosterForLoop = createCustomizableLunaticField<
 			{showButtons && (
 				<>
 					<LoopButton onClick={addRow} disabled={nbRows === max}>
-						{label || D.DEFAULT_BUTTON_ADD}
+						{D.DEFAULT_BUTTON_ADD}
 					</LoopButton>
 					<LoopButton onClick={removeRow} disabled={nbRows === min}>
 						{D.DEFAULT_BUTTON_REMOVE}