Getting type error on checkbox api.controlProps on SVG element

[vincerubinetti]

Thank you for the incredible library. It's been extremely flexible and robust in my usage of it so far.

I have an SVG checkmark I'm using in a checkbox, like this:

// react-icons svg
const Check = api.isChecked ? FaRegSquareCheck : FaRegSquare;
<Check {...api.controlProps} />

Typescript is complaining about the controlProps I'm spreading to it:

Types of property 'onCopy' are incompatible.
    Type 'ClipboardEventHandler<HTMLElement> | undefined' is not assignable to type 'ClipboardEventHandler<SVGElement> | undefined'.
      Type 'ClipboardEventHandler<HTMLElement>' is not assignable to type 'ClipboardEventHandler<SVGElement>'.

It appears the type of controlProps is WithoutRef<React.HTMLAttributes<HTMLElement>>. Perhaps this should be Element instead of HTMLElement?

Or maybe I'm using controlProps wrong.

[segunadebayo]

Hi @vincerubinetti,

Control props should be spread into a div or span element. Then you can render the svg inside the control.

If you really want to use the svg, I would recommend type casting.

[vincerubinetti]

Thanks for the quick response. I see in control props, the aria-hidden attribute is set. What is the actual function/purpose of the "control" element here? I couldn't find anything in the docs. Is this based off of some aria pattern somewhere?

What I'm getting at is, why does it have to be an HTMLElement?

[segunadebayo]

Its purpose is to act as a visual “checkbox” that replaces the native one. The reason it has aria hidden is to hide from the accessibility tree.

That way, only the native input + label will be visible to the accessibility tree.

In theory, it doesn’t have to be an HTMLElement but we’re limited in typings to choose whether it should be an html element or svg.