Make sure labels and form inputs are properly associated when a custom ID is provided

[camertron]

What are you trying to accomplish?

This PR fixes the association between <label>s and their form inputs when a custom ID is provided. Normally, Rails will generate an ID for a given input, and use the same ID for the label. However, creating the input with a custom ID that is not also passed to the label results in the label's for attribute pointing to a non-existent element. For example,

<%= render(Primer::Alpha::TextField(name: :foo, id: "bar", label: "Foobar")) %>

results in the following HTML:

<label for="foo">Foobar</label>
<input type="text" name="foo" id="bar" />

The forms framework (via Rails) appears to link the label to the input's name instead of its ID, which is incorrect.

This PR ensures the two elements are always properly associated.

Integration

No changes necessary in production.

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

@kendallgassner and I discovered we need to pass the given ID to the label's for: argument. This effectively bypasses Rails' default ID generation code.

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1fe44fd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kendallgassner]

💖 thanks for adding a test too!