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

1

Hi

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

2

See for example:
https://rescript-lang.org/try?code=FAAQbghgNsCmAeAXWAnAdtABAMwPa8wC5MAKAPwB0AiAFQE8AHWKozAZ0RQEs0BzASkwBeAHztOPXsMxU2uALaxEACy68qwYFCWYAXtLy5y1ekxZCZEAEYBjKvyA

3

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

4

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

5

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?

6

Hi @ryyppy

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

WithInvalidProps

 @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