[BUG] Duplicated HTML id due to Hydrogen <Image />

[davidhousedev]

Describe the bug

In our designs on Product Details Page, we have a series of image thumbnails with one image that's "selected" and displayed large. We are using the Hydrogen <Image /> component which has the default behavior of setting the HTML id to the underlying id of the image. The result is that we have two <img>s on the page with the same id.

To Reproduce

1. Render a Hydrogen page with two <Image /> components, each that renders the same image
2. Inspect the rendered DOM
3. Notice that there are two <img>s that share the same id

Expected behaviour

I would not expect the Hydrogen <Image /> to set an id. If it did, I'd expect the underlying behavior to guarantee uniqueness via useId or the like.

Screenshots

Additional context
Add any other context about the problem here. eg.

Hydrogen 1.2.0

[frehner]

Yeah, I think this makes sense. That was on there before I started working on components, so I don't have context on the reasoning it was added in the first place. But I think it should be removed if no one has a concrete reason for adding it; I'll ask around.

[aminpaks]

I started looking into this, I think there is an underlying design question about setting an ID or not to the HTML image tag. The <Image /> component has no wrapper, should we not set the ID for the HTML image?

Not setting an ID at all may not be ideal for all use-cases. Currently we set the ID coming in data.id from props, and I think it is already protected by not being at the root level. It should be the consumer's responsibility to provide a unique ID, or skip it.

Thoughts @frehner, @davidhousedev?

Also I noticed that we're setting it to an empty string '' if not provided, I think we shouldn't. If it's undefined, it should stay as is.

[frehner]

should we not set the ID for the HTML image? Not setting an ID at all may not be ideal for all use-cases.

I genuinely don't know; is there any value in us always setting an ID for it? My initial impression is that I don't think there is, but I could be missing some important reason as to why we would want to do it.