StateLabel: Add labels to icon

[siddharthkp]

• Fixes https://github.com/github/primer/issues/3496

The issueClosedNotPlanned variant has an icon that differentiates it from issueClosed and pullClosed . The icon has no text alternative and includes aria-hidden="true", so is ignored by screen readers. Screen reader users do not know what the labels 'Draft', 'Open' and 'Closed' refers to, unless context is being provided elsewhere on the page, for example, the component is on an Issue page.

Before:

<span class="StateLabel__StateLabelBase-sc-qthdln-0 eDFXzm">
  <svg aria-hidden="true" focusable="false">...</svg>
  Closed
</span>

After:

<span class="StateLabel__StateLabelBase-sc-qthdln-0 eDFXzm">
  <svg role="img" aria-label="Issue" focusable="false">...</svg>
  Closed
</span>

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: e7a3e29

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.47 KB (+0.12% 🔺)
packages/react/dist/browser.umd.js	92.68 KB (-0.01% 🔽)

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/333917

Update from Sid: Integration tests are passing :)

[TylerJDev]

Looks great! ✨

[TylerJDev]

non-blocking, but would we want to add "not planned" here? (i.e. "Issue, not planned")

[siddharthkp]

Great catch! Thank you ❤️