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
5 changes: 5 additions & 0 deletions .changeset/wild-actors-jam.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

StateLabel: Differentiate issue and pull request labels for screen readers
23 changes: 22 additions & 1 deletion packages/react/src/StateLabel/StateLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,19 @@ const octiconMap = {
unavailable: AlertIcon,
}

const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Pull request' | ''> = {
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 ❤️

pullClosed: 'Pull request',
pullMerged: 'Pull request',
draft: 'Pull request',
issueDraft: 'Issue',
pullQueued: 'Pull request',
unavailable: '',
}

const colorVariants = variant({
prop: 'status',
variants: {
Expand Down Expand Up @@ -120,7 +133,15 @@ function StateLabel({children, status, variant: variantProp = 'normal', ...rest}
return (
<StateLabelBase {...rest} variant={variantProp} status={status}>
{/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
{status && <Octicon {...octiconProps} icon={octiconMap[status] || QuestionIcon} sx={{mr: 1}} />}
{status && (
<Octicon
{...octiconProps}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
icon={octiconMap[status] || QuestionIcon}
aria-label={labelMap[status]}
sx={{mr: 1}}
/>
)}
{children}
</StateLabelBase>
)
Expand Down
10 changes: 10 additions & 0 deletions packages/react/src/StateLabel/__tests__/StateLabel.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,14 @@ describe('StateLabel', () => {
it('renders children', () => {
expect(render(<StateLabel status="issueOpened">hi</StateLabel>)).toMatchSnapshot()
})

it('adds label to icon', () => {
const screen1 = HTMLRender(<StateLabel status="issueOpened">Open</StateLabel>)
expect(screen1.getByLabelText('Issue')).toBeInTheDocument() // svg
expect(screen1.getByText('Open')).toBeInTheDocument() // text

const screen2 = HTMLRender(<StateLabel status="pullMerged">Merged</StateLabel>)
expect(screen2.getByLabelText('Pull request')).toBeInTheDocument() // svg
expect(screen2.getByText('Merged')).toBeInTheDocument() // text
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ exports[`StateLabel renders children 1`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -91,11 +92,12 @@ exports[`StateLabel respects the status prop 1`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -149,11 +151,12 @@ exports[`StateLabel respects the status prop 2`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -207,11 +210,12 @@ exports[`StateLabel respects the status prop 3`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -262,11 +266,12 @@ exports[`StateLabel respects the status prop 4`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Pull request"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -317,11 +322,12 @@ exports[`StateLabel respects the status prop 5`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Pull request"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -372,11 +378,12 @@ exports[`StateLabel respects the variant prop 1`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down Expand Up @@ -430,11 +437,12 @@ exports[`StateLabel respects the variant prop 2`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand Down
Loading