[Accessibility] Update preview to give each input field a unique ID + add aria-label to leading visual

[kendallgassner]

What are you trying to accomplish?

Closes:

• https://github.com/github/accessibility-audits/issues/10120
• https://github.com/github/primer/issues/4065

Screenshots

N/A

Integration

N/A

List the issues that this change affects.

• https://github.com/github/accessibility-audits/issues/10120
• https://github.com/github/primer/issues/4065
  Closes # (type the GitHub issue number after #)

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.

What approach did you choose and why?

This PR updates the IDs of each input field on the TextField Options preview so that they are unique. Unique IDs are important for screen readers to properly match labels with input fields.

I also have added an aria-label to the search icon leading visual in the TextField Options preview .

Accessibility

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

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome (+ NVDA)
• Tested in Firefox
• Tested in Safari (+ VoiceOver)
• 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]

⚠️ No Changeset found

Latest commit: 6afb34a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

⚠️ Visual or ARIA snapshot differences found

Our visual and ARIA snapshot tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review differences

[camertron]

Thank you 🎉