Custom checkbox

frontend/.eslintrc.cjs

@@ -35,13 +35,16 @@ module.exports = {
   },
   overrides: [
     {
-      files: "*.e2e.ts",
+      files: ["*.e2e.ts", "*PgObj.ts"],
       extends: [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended-type-checked",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
         "plugin:playwright/recommended",
+        "prettier",
       ],
-      plugins: ["@typescript-eslint"],
+      plugins: ["@typescript-eslint", "prettier"],
       rules: {
         "@typescript-eslint/no-floating-promises": "error",
       },

frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.tsx

@@ -177,7 +177,7 @@ export function CandidatesVotesForm({ group }: CandidatesVotesFormProps) {
           </BottomBar.Row>
         )}
         <BottomBar.Row hidden={errors.length > 0 || warnings.length === 0 || hasChanges}>
-          <Checkbox id={_IGNORE_WARNINGS_ID} defaultChecked={ignoreWarnings}>
+          <Checkbox id={_IGNORE_WARNINGS_ID} defaultChecked={ignoreWarnings} hasError={warningsWarning}>
             Ik heb de aantallen gecontroleerd met het papier en correct overgenomen.
           </Checkbox>
         </BottomBar.Row>

frontend/app/component/form/polling_station_choice/PollingStationSelector.module.css

@@ -31,7 +31,7 @@
   }
 
   .icon {
-    padding-top: 6px;
+    padding-top: 0.375rem;
     padding-right: 1rem;
   }
 

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

@@ -1,7 +1,7 @@
 import { userEvent } from "@testing-library/user-event";
 import { describe, expect, test, vi } from "vitest";
 
-import { getUrlMethodAndBody, overrideOnce, render, screen, userTypeInputs } from "app/test/unit";
+import { getUrlMethodAndBody, overrideOnce, render, screen, userTypeInputs, waitFor } from "app/test/unit";
 import { emptyDataEntryRequest } from "app/test/unit/form.ts";
 
 import { FormState, PollingStationFormController, PollingStationValues } from "@kiesraad/api";
@@ -368,6 +368,17 @@ describe("Test VotersAndVotesForm", () => {
       expect(alertText).toHaveTextContent(
         /^Je kan alleen verder als je het papieren proces-verbaal hebt gecontroleerd.$/,
       );
+
+      await user.clear(screen.getByTestId("blank_votes_count"));
+      await user.type(screen.getByTestId("blank_votes_count"), "100");
+      await user.tab();
+      expect(screen.getByTestId("blank_votes_count"), "100").toHaveValue("100");
+
+      await waitFor(() => {
+        const checkbox = screen.getByTestId("voters_and_votes_form_ignore_warnings");
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).not.toBeVisible();
+      });
     });
 
     test("W.201 high number of blank votes", async () => {

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

@@ -309,7 +309,7 @@ export function VotersAndVotesForm() {
           </BottomBar.Row>
         )}
         <BottomBar.Row hidden={errors.length > 0 || warnings.length === 0 || hasChanges}>
-          <Checkbox id={_IGNORE_WARNINGS_ID} defaultChecked={ignoreWarnings}>
+          <Checkbox id={_IGNORE_WARNINGS_ID} defaultChecked={ignoreWarnings} hasError={warningsWarning}>
             Ik heb de aantallen gecontroleerd met het papier en correct overgenomen.
           </Checkbox>
         </BottomBar.Row>

frontend/e2e-tests/dom-to-db-tests/data-entry.e2e.ts

@@ -158,7 +158,7 @@ test.describe("data entry", () => {
     await expect(votersVotesPage.warning).toContainText(
       "Er is een onverwacht verschil tussen het aantal toegelaten kiezers (A t/m D) en het aantal uitgebrachte stemmen (E t/m H).",
     );
-    await votersVotesPage.acceptWarnings.check();
+    await votersVotesPage.checkAcceptWarnings();
     await votersVotesPage.next.click();
 
     const differencesPage = new DifferencesPage(page);
@@ -231,7 +231,7 @@ test.describe("data entry", () => {
     await expect(votersVotesPage.warning).toContainText(
       "Er is een onverwacht verschil tussen het aantal uitgebrachte stemmen (E t/m H) en het herteld aantal toegelaten kiezers (A.2 t/m D.2).",
     );
-    await votersVotesPage.acceptWarnings.check();
+    await votersVotesPage.checkAcceptWarnings();
     await votersVotesPage.next.click();
 
     const differencesPage = new DifferencesPage(page);
@@ -383,7 +383,7 @@ test.describe("errors and warnings", () => {
     await expect(votersVotesPage.error).toBeHidden();
 
     // accept the warning
-    await votersVotesPage.acceptWarnings.check();
+    await votersVotesPage.checkAcceptWarnings();
     await votersVotesPage.next.click();
 
     const differencesPage = new DifferencesPage(page);
@@ -622,7 +622,8 @@ test.describe("navigation", () => {
         total_votes_cast_count: 100,
       };
       await votersVotesPage.fillInPageAndClickNext(voters, votes);
-      await votersVotesPage.acceptWarnings.click();
+
+      await votersVotesPage.checkAcceptWarnings();
       await votersVotesPage.next.click();
 
       const differencesPage = new DifferencesPage(page);

frontend/e2e-tests/page-objects/input/VotersVotesPgObj.ts

@@ -106,4 +106,9 @@ export class VotersVotesPage extends InputBasePage {
     }
     await this.next.click();
   }
+
+  async checkAcceptWarnings() {
+    // eslint-disable-next-line playwright/no-force-option -- force option needed to click on hidden element
+    await this.acceptWarnings.check({ force: true, noWaitAfter: true });
+  }
 }

frontend/lib/icon/generated.tsx

@@ -81,6 +81,12 @@ export const IconCheckmark = (props: React.SVGAttributes<SVGElement>) => (
   </svg>
 );
 
+export const IconCheckmarkSmall = (props: React.SVGAttributes<SVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 14">
+    <path d="M5.2,10.9h0c-.3,0-.5-.1-.7-.3l-2.9-2.9c-.4-.4-.4-1,0-1.4.4-.4,1-.4,1.4,0l2.2,2.2,5.7-5.7c.4-.4,1-.4,1.4,0s.4,1,0,1.4l-6.4,6.4c-.2.2-.4.3-.7.3Z" />
+  </svg>
+);
+
 export const IconChevronRight = (props: React.SVGAttributes<SVGElement>) => (
   <svg {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path

frontend/lib/ui/BottomBar/BottomBar.module.css

@@ -22,8 +22,11 @@
     display: flex;
     align-items: center;
     gap: 2rem;
+
     &:global(.hidden) {
       display: none;
+      visibility: hidden;
+      opacity: 0;
     }
   }
 }

frontend/lib/ui/BottomBar/BottomBar.tsx

@@ -14,5 +14,9 @@ export function BottomBar({ type, children }: BottomBarProps) {
 }
 
 BottomBar.Row = function BottomBarRow({ children, hidden }: { children: React.ReactNode; hidden?: boolean }) {
-  return <section className={cn("row", { hidden: hidden })}>{children}</section>;
+  return (
+    <section hidden={hidden} className={cn("row", { hidden: !!hidden })}>
+      {children}
+    </section>
+  );
 };

frontend/lib/ui/Checkbox/Checkbox.module.css

@@ -2,17 +2,60 @@
   display: inline-flex;
   align-items: center;
 
+  /* https://css-tricks.com/inclusively-hidden/ */
   input {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  > div {
+    overflow: hidden;
     margin-right: 0.5rem;
+    flex: 0 0 1.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 0.375rem;
+    padding: 0;
+    border: 1px solid var(--border-color-default);
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 1px 1px rgba(66, 210, 243, 0.4);
+      border: 1px solid var(--blue-dark-400);
+    }
+
+    &:global(.checked) {
+      background-color: var(--bg-highlight);
+      border-color: var(--base-dark-blue);
+      svg {
+        opacity: 1;
+      }
+    }
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      fill: var(--base-dark-blue);
+      opacity: 0;
+    }
   }
 
   &:global(.hidden) {
     display: none;
   }
 
   &:global(.has-error) {
-    input {
-      outline: 1px solid var(--color-error);
+    > div {
+      border-color: var(--color-error-darker);
     }
   }
 }

frontend/lib/ui/Checkbox/Checkbox.stories.tsx

@@ -7,15 +7,23 @@ type Props = {
 };
 
 export const DefaultCheckbox: Story<Props> = ({ label }) => (
-  <Checkbox id="default-checkbox" defaultChecked={false}>
-    {label}
-  </Checkbox>
-);
-
-export const ErrorCheckbox: Story<Props> = ({ label }) => (
-  <Checkbox id="default-checkbox" hasError defaultChecked={false}>
-    {label}
-  </Checkbox>
+  <div>
+    <Checkbox id="default-checkbox" defaultChecked={false}>
+      {label}
+    </Checkbox>
+    <br />
+    <br />
+    <Checkbox id="default-checkbox-error" defaultChecked={false} hasError>
+      {label}
+    </Checkbox>
+    <br />
+    <br />
+    <div style={{ width: 200 }}>
+      <Checkbox id="default-checkbox-cramped" defaultChecked={false}>
+        {label}
+      </Checkbox>
+    </div>
+  </div>
 );
 
 export default {

frontend/lib/ui/Checkbox/Checkbox.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import { describe, expect, test } from "vitest";
 
 import { Checkbox } from "./Checkbox";
@@ -14,6 +15,7 @@ describe("UI component: Checkbox", () => {
     expect(screen.getByText("Test label")).toBeInTheDocument();
 
     expect(screen.getByTestId("test-id")).not.toBeChecked();
+    expect(screen.queryByLabelText("Aangevinkt")).not.toBeInTheDocument();
   });
 
   test("The checkbox is checked", () => {
@@ -24,5 +26,25 @@ describe("UI component: Checkbox", () => {
     );
 
     expect(screen.getByTestId("test-id")).toBeChecked();
+    expect(screen.getByLabelText("Aangevinkt")).toBeInTheDocument();
+  });
+  test("The checkbox toggles", async () => {
+    render(
+      <Checkbox id="test-id" defaultChecked={false}>
+        Test label
+      </Checkbox>,
+    );
+
+    expect(screen.getByTestId("test-id")).not.toBeChecked();
+
+    const user = userEvent.setup();
+
+    await user.click(screen.getByTestId("checkbox-button-test-id"));
+
+    expect(screen.getByTestId("test-id")).toBeChecked();
+
+    await user.click(screen.getByTestId("checkbox-button-test-id"));
+
+    expect(screen.getByTestId("test-id")).not.toBeChecked();
   });
 });

frontend/lib/ui/Checkbox/Checkbox.tsx

@@ -1,3 +1,6 @@
+import * as React from "react";
+
+import { IconCheckmarkSmall } from "@kiesraad/icon";
 import { cn } from "@kiesraad/util";
 
 import cls from "./Checkbox.module.css";
@@ -9,12 +12,32 @@ interface CheckboxProps {
   defaultChecked?: boolean;
 }
 
-//TODO: you can't style a border for a checkbox, currently outline is used as a workaround but the border radius doesnt match
-
 export function Checkbox({ id, children, defaultChecked, hasError }: CheckboxProps) {
+  const [checked, setChecked] = React.useState(defaultChecked);
+
+  React.useEffect(() => {
+    setChecked(defaultChecked);
+  }, [defaultChecked]);
+
+  const toggleCheckbox = () => {
+    setChecked((prev) => !prev);
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
   return (
     <div className={cn(cls.checkbox, { "has-error": !!hasError })} aria-label="input" id={`checkbox-container-${id}`}>
-      <input type="checkbox" id={id} name={id} defaultChecked={defaultChecked} />
+      <div
+        className={checked ? "checked" : "unchecked"}
+        aria-hidden={true}
+        onClick={toggleCheckbox}
+        id={`checkbox-button-${id}`}
+      >
+        <IconCheckmarkSmall aria-label={checked ? "Aangevinkt" : "uitgevinkt"} />
+      </div>
+      <input type="checkbox" id={id} name={id} checked={checked} onChange={onChange} />
       <label htmlFor={id}>{children}</label>
     </div>
   );