diff --git a/.changeset/wild-actors-jam.md b/.changeset/wild-actors-jam.md new file mode 100644 index 00000000000..b3da43da561 --- /dev/null +++ b/.changeset/wild-actors-jam.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +StateLabel: Differentiate issue and pull request labels for screen readers diff --git a/packages/react/src/StateLabel/StateLabel.tsx b/packages/react/src/StateLabel/StateLabel.tsx index 28fb261353f..37c4ce8799f 100644 --- a/packages/react/src/StateLabel/StateLabel.tsx +++ b/packages/react/src/StateLabel/StateLabel.tsx @@ -33,6 +33,19 @@ const octiconMap = { unavailable: AlertIcon, } +const labelMap: Record = { + issueOpened: 'Issue', + pullOpened: 'Pull request', + issueClosed: 'Issue', + issueClosedNotPlanned: 'Issue', + pullClosed: 'Pull request', + pullMerged: 'Pull request', + draft: 'Pull request', + issueDraft: 'Issue', + pullQueued: 'Pull request', + unavailable: '', +} + const colorVariants = variant({ prop: 'status', variants: { @@ -120,7 +133,15 @@ function StateLabel({children, status, variant: variantProp = 'normal', ...rest} return ( {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */} - {status && } + {status && ( + + )} {children} ) diff --git a/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx b/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx index f7a492b1d6a..1739f891ce9 100644 --- a/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx +++ b/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx @@ -43,4 +43,14 @@ describe('StateLabel', () => { it('renders children', () => { expect(render(hi)).toMatchSnapshot() }) + + it('adds label to icon', () => { + const screen1 = HTMLRender(Open) + expect(screen1.getByLabelText('Issue')).toBeInTheDocument() // svg + expect(screen1.getByText('Open')).toBeInTheDocument() // text + + const screen2 = HTMLRender(Merged) + expect(screen2.getByLabelText('Pull request')).toBeInTheDocument() // svg + expect(screen2.getByText('Merged')).toBeInTheDocument() // text + }) }) diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap index abf071fef16..9fa743d45f8 100644 --- a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap +++ b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap @@ -32,11 +32,12 @@ exports[`StateLabel renders children 1`] = ` className="c0" >