Generate unique labels for all form control inputs

[llastflowers]

What are you trying to accomplish?

• Address a11y remediation issue
• Generate unique labels for formcontrol inputs so that labels are announced correctly

Integration

N/A

List the issues that this change affects.

Addresses https://github.com/github/accessibility-audits/issues/14752

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?

The labels were all being announced at once when the first input was focused, because the inputs all had the same id which broke the label association. The other input labels were also not being announced. This updates the previews so that unique labels are generated for each input, addressing the SR announcement issues.

Anything you want to highlight for special attention from reviewers?

N/A

Accessibility

Fix for a11y audit remediation issue

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9a6c6cb

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

[Copilot]

Pull request overview

This PR addresses an accessibility issue where form control inputs in preview files shared the same hardcoded ID ("bar"), causing screen readers to announce all labels simultaneously when focusing the first input. The fix generates unique IDs using SecureRandom.hex to ensure proper label-to-input association and correct screen reader announcements.

Changes:

• Generate unique field IDs dynamically using SecureRandom.hex(6) for each form control preview instance
• Update both the label_arguments and input id to use the generated unique ID

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.