Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StateLabel: Add labels to icon #4764

Merged
merged 12 commits into from
Jul 24, 2024
Merged

StateLabel: Add labels to icon #4764

merged 12 commits into from
Jul 24, 2024

Conversation

siddharthkp
Copy link
Member

@siddharthkp siddharthkp commented Jul 22, 2024

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.
Screen shot of State Label variants for Issues and Pull requests, each consists of a single word, with a coloured background shaped like a pill, with an icon

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

Copy link

changeset-bot bot commented Jul 22, 2024

🦋 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

@siddharthkp siddharthkp added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 22, 2024
@siddharthkp siddharthkp self-assigned this Jul 22, 2024
@github-actions github-actions bot added the staff Author is a staff member label Jul 22, 2024
Copy link
Contributor

github-actions bot commented Jul 22, 2024

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
Copy link

primer-integration bot commented Jul 22, 2024

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

Update from Sid: Integration tests are passing :)

@github-actions github-actions bot temporarily deployed to storybook-preview-4764 July 22, 2024 16:23 Inactive
@siddharthkp siddharthkp added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 23, 2024
@siddharthkp siddharthkp marked this pull request as ready for review July 23, 2024 10:05
@siddharthkp siddharthkp requested a review from a team as a code owner July 23, 2024 10:05
Copy link
Contributor

@TylerJDev TylerJDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! ✨

issueOpened: 'Issue',
pullOpened: 'Pull request',
issueClosed: 'Issue',
issueClosedNotPlanned: 'Issue',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

@siddharthkp siddharthkp Jul 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch! Thank you ❤️

@siddharthkp siddharthkp added this pull request to the merge queue Jul 24, 2024
@siddharthkp siddharthkp removed this pull request from the merge queue due to a manual request Jul 24, 2024
@siddharthkp siddharthkp added this pull request to the merge queue Jul 24, 2024
Merged via the queue into main with commit 533f997 Jul 24, 2024
30 checks passed
@siddharthkp siddharthkp deleted the labelled-state-labels branch July 24, 2024 13:45
@primer primer bot mentioned this pull request Jul 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh staff Author is a staff member
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants