Radio/checkbox: Include description in label, set correct label styli…

…ng (#1031)
kiesraad · Feb 17, 2025 · 75999d8 · 75999d8
1 parent b6c76a5
commit 75999d8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/frontend/app/module/users/create/UserCreateRolePage.test.tsx b/frontend/app/module/users/create/UserCreateRolePage.test.tsx
@@ -29,17 +29,17 @@ describe("UserCreateRolePage", () => {
 
     expect(await screen.findByRole("heading", { level: 1, name: "Gebruiker toevoegen" })).toBeInTheDocument();
 
-    expect(await screen.findByLabelText("Beheerder")).not.toBeChecked();
-    expect(await screen.findByLabelText("Coördinator")).not.toBeChecked();
-    expect(await screen.findByLabelText("Invoerder")).not.toBeChecked();
+    expect(await screen.findByLabelText(/Beheerder/)).not.toBeChecked();
+    expect(await screen.findByLabelText(/Coördinator/)).not.toBeChecked();
+    expect(await screen.findByLabelText(/Invoerder/)).not.toBeChecked();
   });
 
   test("Shows form previously selected", async () => {
     renderPage({ user: { role: "typist" } });
 
-    expect(await screen.findByLabelText("Beheerder")).not.toBeChecked();
-    expect(await screen.findByLabelText("Coördinator")).not.toBeChecked();
-    expect(await screen.findByLabelText("Invoerder")).toBeChecked();
+    expect(await screen.findByLabelText(/Beheerder/)).not.toBeChecked();
+    expect(await screen.findByLabelText(/Coördinator/)).not.toBeChecked();
+    expect(await screen.findByLabelText(/Invoerder/)).toBeChecked();
   });
 
   test("Shows validation error when nothing selected", async () => {
@@ -59,10 +59,10 @@ describe("UserCreateRolePage", () => {
   });
 
   test.each([
-    ["Beheerder", { role: "administrator", type: "fullname" }, "/users/create/details"],
-    ["Coördinator", { role: "coordinator", type: "fullname" }, "/users/create/details"],
-    ["Invoerder", { role: "typist" }, "/users/create/type"],
-  ])("Continue after selection as %s", async (label: string, update: unknown, newPath: string) => {
+    [/Beheerder/, { role: "administrator", type: "fullname" }, "/users/create/details"],
+    [/Coördinator/, { role: "coordinator", type: "fullname" }, "/users/create/details"],
+    [/Invoerder/, { role: "typist" }, "/users/create/type"],
+  ])("Continue after selection as %s", async (label: RegExp, update: unknown, newPath: string) => {
     const updateUser = vi.fn();
     renderPage({ user: {}, updateUser });
 

diff --git a/frontend/lib/ui/CheckboxAndRadio/CheckboxAndRadio.module.css b/frontend/lib/ui/CheckboxAndRadio/CheckboxAndRadio.module.css
@@ -141,6 +141,7 @@
   > div:global(.labels) {
     display: flex;
     flex-direction: column;
+    color: var(--base-black);
 
     > * {
       padding-left: 0.5rem;
@@ -150,7 +151,7 @@
       cursor: pointer;
     }
 
-    span:global(.description) {
+    div:global(.description) {
       color: var(--color-help-text);
     }
   }

diff --git a/frontend/lib/ui/CheckboxAndRadio/CheckboxAndRadio.tsx b/frontend/lib/ui/CheckboxAndRadio/CheckboxAndRadio.tsx
@@ -1,7 +1,5 @@
 import * as React from "react";
 
-import { cn } from "@kiesraad/util";
-
 import cls from "./CheckboxAndRadio.module.css";
 
 export interface CheckboxAndRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -34,7 +32,7 @@ export const CheckboxAndRadio = React.forwardRef<HTMLInputElement, CheckboxAndRa
     ref,
   ) => {
     return (
-      <div className={cn(cls["checkbox-and-radio"])} id={`${type}-container-${id}`}>
+      <div className={cls.checkboxAndRadio} id={`${type}-container-${id}`}>
         <input
           className={`${type}${indeterminate ? " indeterminate" : ""}`}
           type={type}
@@ -49,8 +47,10 @@ export const CheckboxAndRadio = React.forwardRef<HTMLInputElement, CheckboxAndRa
           {...inputProps}
         />
         <div className="labels">
-          <label htmlFor={id}>{label}</label>
-          {children !== undefined && <span className="description">{children}</span>}
+          <label htmlFor={id}>
+            {label}
+            {children !== undefined && <div className="description">{children}</div>}
+          </label>
         </div>
       </div>
     );