Tutorial - Intro : markup and a11ty

[c-marc]

Hi I'm reading
https://storybook.js.org/tutorials/intro-to-storybook/react/en/simple-component/

I'm no expert on the subject but I think there might some error or some confusing content. I'm raising it because it's a tutorial and a simple example that also emphasizes accessibility concerns. Many people might be here learning, so it might be worth checking. I might be wrong on this.

To my understanding the htmlFor attribute of label tags is helpful because it "links" to the id of an input (not a name). And this is important when these html elements are siblings in the DOM. So I think that in the example, you don't need htmlFor because you're writing inputs as a child of their label. And would you need to set htmlFor, you'd need to bind it to the id of the input and not the name. That's what I mean by a possibly confusing/misleading content. So if that's confirmed two valid PR would be:

1. either forget the htmlFor that is unnecessary when input is nested in the label; and that is incidentally inappropriately set because it should point to an input's id but that doesn't matter here
2. or write the markup so that label and input are siblings (they can be wrapped in a div or sthg else if grouping is important for styling), but use htmlFor with a ref to a matching input's id.

Don't hesitate to correct me if I'm wrong or enhance my explanation otherwise. Also these two options might not be equivalent and have different pros and cons that I'm not aware of, so it would be interesting to have an expert's comment on this before choosing. Cheers