Implement custom radiobuttons + choicelist component

frontend/app/component/form/data_entry/candidates_votes/CandidatesVotesForm.tsx

@@ -190,9 +190,8 @@ export function CandidatesVotesForm({ group }: CandidatesVotesFormProps) {
             defaultChecked={acceptWarnings}
             hasError={warningsWarning}
             ref={acceptWarningsRef}
-          >
-            Ik heb de aantallen gecontroleerd met het papier en correct overgenomen.
-          </Checkbox>
+            label="Ik heb de aantallen gecontroleerd met het papier en correct overgenomen."
+          />
         </BottomBar.Row>
         <BottomBar.Row>
           <KeyboardKeys.HintText>

frontend/app/component/form/data_entry/differences/DifferencesForm.tsx

@@ -225,9 +225,8 @@ export function DifferencesForm() {
             defaultChecked={acceptWarnings}
             hasError={warningsWarning}
             ref={acceptWarningsRef}
-          >
-            Ik heb de aantallen gecontroleerd met het papier en correct overgenomen.
-          </Checkbox>
+            label="Ik heb de aantallen gecontroleerd met het papier en correct overgenomen."
+          />
         </BottomBar.Row>
         <BottomBar.Row>
           <Button type="submit" size="lg" disabled={status.current === "saving"}>

frontend/app/component/form/data_entry/recounted/RecountedForm.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { useRecounted } from "@kiesraad/api";
-import { BottomBar, Button, Feedback, Form, KeyboardKey, KeyboardKeys } from "@kiesraad/ui";
+import { BottomBar, Button, ChoiceList, Feedback, Form, KeyboardKey, KeyboardKeys } from "@kiesraad/ui";
 
 interface FormElements extends HTMLFormControlsCollection {
   yes: HTMLInputElement;
@@ -67,14 +67,22 @@ export function RecountedForm() {
         op basis daarvan herteld door het gemeentelijk stembureau?
       </p>
       <div className="radio-form">
-        <label>
-          <input type="radio" name="recounted" id="yes" defaultChecked={sectionValues.recounted === true} />
-          Ja, er was een hertelling
-        </label>
-        <label>
-          <input type="radio" name="recounted" id="no" defaultChecked={sectionValues.recounted === false} />
-          Nee, er was geen hertelling
-        </label>
+        <ChoiceList>
+          <ChoiceList.Radio
+            id="yes"
+            value="yes"
+            name="recounted"
+            defaultChecked={sectionValues.recounted === true}
+            label="Ja, er was een hertelling"
+          />
+          <ChoiceList.Radio
+            id="no"
+            value="no"
+            name="recounted"
+            defaultChecked={sectionValues.recounted === false}
+            label="Nee, er was geen hertelling"
+          />
+        </ChoiceList>
       </div>
       <BottomBar type="form">
         <BottomBar.Row>

frontend/app/component/form/data_entry/voters_and_votes/VotersAndVotesForm.tsx

@@ -306,9 +306,8 @@ export function VotersAndVotesForm() {
             defaultChecked={acceptWarnings}
             hasError={warningsWarning}
             ref={acceptWarningsRef}
-          >
-            Ik heb de aantallen gecontroleerd met het papier en correct overgenomen.
-          </Checkbox>
+            label="Ik heb de aantallen gecontroleerd met het papier en correct overgenomen."
+          />
         </BottomBar.Row>
         <BottomBar.Row>
           <Button type="submit" size="lg" disabled={status.current === "saving"}>

frontend/app/module/data_entry/PollingStation/PollingStation.test.tsx

@@ -28,10 +28,16 @@ const expectRecountedForm = async () => {
 
 const fillRecountedFormNo = async () => {
   await user.click(screen.getByLabelText("Nee, er was geen hertelling"));
+  await waitFor(() => {
+    expect(screen.getByLabelText("Nee, er was geen hertelling")).toBeChecked();
+  });
 };
 
 const fillRecountedFormYes = async () => {
   await user.click(screen.getByLabelText("Ja, er was een hertelling"));
+  await waitFor(() => {
+    expect(screen.getByLabelText("Ja, er was een hertelling")).toBeChecked();
+  });
 };
 
 const expectVotersAndVotesForm = async () => {

frontend/e2e-tests/page-objects/data_entry/VotersAndVotesPgObj.ts

@@ -109,7 +109,6 @@ export class VotersAndVotesPage extends DataEntryBasePage {
 
   async checkAcceptWarnings() {
     await this.acceptWarnings.waitFor();
-    // eslint-disable-next-line playwright/no-force-option -- force option needed to click on hidden element
-    await this.acceptWarnings.check({ force: true, noWaitAfter: true });
+    await this.acceptWarnings.check();
   }
 }

frontend/lib/icon/generated.tsx

@@ -123,8 +123,8 @@ export const IconInfo = (props: React.SVGAttributes<SVGElement>) => (
 );
 
 export const IconMinus = (props: React.SVGAttributes<SVGElement>) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" role="img">
-    <path d="M19,13H5c-.6,0-1-.4-1-1s.4-1,1-1h14c.6,0,1,.4,1,1s-.4,1-1,1Z" />
+  <svg role="img" {...props} viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.730 6.023 C 2.454 6.069,2.147 6.301,2.023 6.559 C 1.898 6.817,1.891 7.154,2.005 7.408 C 2.071 7.557,2.224 7.732,2.378 7.835 C 2.650 8.017,2.334 8.006,7.082 7.998 L 11.305 7.992 11.437 7.938 C 11.696 7.834,11.920 7.609,12.019 7.356 C 12.092 7.167,12.093 6.834,12.020 6.646 C 11.951 6.470,11.831 6.318,11.662 6.193 C 11.387 5.991,11.817 6.009,7.070 6.005 C 4.629 6.003,2.804 6.011,2.730 6.023 " />
   </svg>
 );