Add unique ids on each textarea to fix announcement issues

[llastflowers]

What are you trying to accomplish?

• Address a11y remediation issue
• Make SR announce the labels correctly on all examples in the TextArea: Options story

Integration

N/A

List the issues that this change affects.

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

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 for all of the textareas on the page were being announced at once when focusing the first example on the page (and not announced on any of the others), because the examples did not have unique ids. This adds unique ids so that the labels are announced correctly when the corresponding textarea is focused.

Issues can be observed here by turning on SR and focusing each of the textareas in turn.

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: 0120454

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 fixes an accessibility issue where screen readers were announcing all labels at once when focusing the first textarea in the TextArea Options story. The issue was caused by all textarea examples using the same name, resulting in duplicate IDs being generated.

Changes:

• Added unique id and name attributes to all TextArea examples in the preview file to ensure proper label-to-input associations for screen readers

---

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