Rescript react ariaLabel prop is not getting transformed to "aria-label" with non dom elements


I am using

“rescript”: “^9.1.2”,
“gentype”: “^4.0.0”

When I write the binding like the following
module Tracker = { @genType.import(("tracker", "Tracker")) @react.component external make: ( ~ariaLabel: string=?, ) => React.element = "Tracker" }

The generated gen.tsx is

export const TrackerTypeChecked: React.ComponentType<{ readonly ariaLabel?: string }> = TrackerNotChecked;

I am expecting the gen.tsx to be
export const TrackerTypeChecked: React.ComponentType<{ readonly "aria-label"?: string }> = TrackerNotChecked;

I have followed the guidelines here Components and Props | React

Seems the above documentation appiles only to the dom elements like div, button

Here is generated bs.js where external component Tracker is used

React.createElement("header", undefined, React.createElement(Tracker.make, { currentStep: currentStep, steps: 5, ariaLabel: "tracker" })), React.createElement("main", undefined, children)); }


The ariaLabel is not transformed to “aria-label”. Do I need to follow the Elements & JSX | React for passing aria-label to the non dom elements

DId I miss anything, please help

See for example:

This is not recommended as it’s easily abused. But not sure if there’s a cleaner workaround.

Thanks @cristianoc but the genType gen.tsx are generating
readonly aria-label?: string
It should be
readonly "aria-label"?: string

Is the Tracker component really asking for a "aria-label" attribute? Kinda feels wrong to me to define a component prop with such a name.

How does the Tracker component implementation look like?

Hi @ryyppy

You are right it was not asking for it explicitly
I have managed to solve the issue


 @genType @react.component
 let make = (~dataTestId=?, ~ariaLabel=?, ~children) => {
 let props = {
   "data-testid": dataTestId,
   "aria-label": ariaLabel,

React.cloneElement(children, props)

<WithInvalidProps ariaLabel="tracker">
  <Tracker ../>
</WithInvalidProps />
1 Like