Using Checkbox resulting in Buttons do not have an accessible name warning in pagespeed.web.dev

[peteruithoven]

I'm using a Radix Checkbox, with a label, but I'm still getting a "Buttons do not have an accessible name" warning on pagespeed.web.dev:

https://pagespeed.web.dev/analysis/https-repaircafe-amsterdam/td8kpvcyig?form_factor=mobile#accessibility

With my code (see below) I'm sticking very closely to the example usage code for the Checkbox. It has a label, linked through htmlFor to the checkbox, but something get's lost. In the documentation I couldn't find alternative ways to provide a label.

"use client";
import * as Checkbox from "@radix-ui/react-checkbox";
import Check from "@/app/icons/Check.svg?react";
import useOfficeHours from "./useOfficeHours";

export default function OfficeHoursCheckbox() {
  const { value, setValue } = useOfficeHours();
  return (
    <div className="flex items-center gap-2">
      <Checkbox.Root
        className="flex h-[20px] w-[20px] shrink-0 appearance-none items-center justify-center border-2 border-blue bg-white outline-none data-[state=checked]:bg-blue"
        id="office-hours"
        checked={value === "true"}
        onCheckedChange={(value) => setValue(String(value))}
      >
        <Checkbox.Indicator className="text-white">
          <Check className="w-[18px] text-white" />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label className="leading-none" htmlFor="office-hours">
        Alleen buiten kantooruren
      </label>
    </div>
  );
}

File: https://github.com/Repaircafes-in-Amsterdam/Repaircafes-in-Amsterdam/blob/main/app/OfficeHoursCheckbox.tsx
Usage: https://www.repaircafe.amsterdam/

[peteruithoven]

I just added a aria-label which solved the problem.

Might be good to add to the example?