fix: label on roster for loop

InseeFr · Jan 12, 2024 · 5449b71 · 5449b71
1 parent bf3ab8b
commit 5449b71
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
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}