feat(accessibility): focus on the last row when user add/remove a row

.gitignore

@@ -29,3 +29,7 @@ test-report.xml
 /playwright-report/
 /playwright/.cache/
 *.tgz
+
+# Playwright
+/blob-report/
+/playwright/.auth/

e2e/loop.spec.ts

@@ -25,3 +25,37 @@ loopTypes.forEach((loopType) => {
 		]);
 	});
 });
+
+test.describe('Loop row interaction', () => {
+	loopTypes.forEach((loopType) => {
+		const loopName = loopType.split('--')[0];
+
+		test(`adding row focuses the new row first input - ${loopName}`, async ({
+			page,
+		}) => {
+			await goToStory(page, `components-${loopType}`);
+			await page.locator('#prenom-0').fill('John');
+			// Add a new row
+			await page.getByRole('button', { name: 'Add row' }).click();
+			// Expect focus to be on the first input of the new row (index 1)
+			const activeTag = await page.evaluate(() => document.activeElement?.id);
+			expect(activeTag).toBe('prenom-1');
+		});
+
+		test(`removing row focuses the previous row first input - ${loopName}`, async ({
+			page,
+		}) => {
+			await goToStory(page, `components-${loopType}`);
+			await page.locator('#prenom-0').fill('John');
+			await page.getByRole('button', { name: 'Add row' }).click();
+			await page.locator('#prenom-1').fill('Jane');
+			await page.getByRole('button', { name: 'Add row' }).click();
+			await page.locator('#prenom-2').fill('Janette');
+			// Remove the last row (Janette)
+			await page.getByRole('button', { name: 'Remove row' }).click();
+			// Expect focus to be on the first input of the new last row (index 1, Jane)
+			const activeTag = await page.evaluate(() => document.activeElement?.id);
+			expect(activeTag).toBe('prenom-1');
+		});
+	});
+});