Skip to content

StateLabel: Add labels to icon#4764

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.

Sign up for GitHub

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

Merged
siddharthkp merged 12 commits into from
Jul 24, 2024
Merged

StateLabel: Add labels to icon #4764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cd9966f
fix accessibility issue first
siddharthkp Jul 22, 2024
17a0922
stronger types
siddharthkp Jul 22, 2024
ea6bc8f
add tests, update snapshots
siddharthkp Jul 22, 2024
ddafb9e
remove unused icon
siddharthkp Jul 22, 2024
13b0499
remove unrelated changes
siddharthkp Jul 22, 2024
819706d
remove unrelated changes
siddharthkp Jul 22, 2024
af3dc9c
run lint locally (sigh)
siddharthkp Jul 22, 2024
7b43541
Create wild-actors-jam.md
siddharthkp Jul 22, 2024
2fae515
bring back eslint-disable-line
siddharthkp Jul 22, 2024
a79a202
add not planned for issueClosedNotPlanned
siddharthkp Jul 24, 2024
0df55cd
have to add an awkward member to the types
siddharthkp Jul 24, 2024
e7a3e29
update snapshots
siddharthkp Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wild-actors-jam.md
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,6 +33,19 @@ const octiconMap = {
unavailable: AlertIcon,
}

const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' | 'Pull request' | ''> = {
issueOpened: 'Issue',
pullOpened: 'Pull request',
issueClosed: 'Issue',
issueClosedNotPlanned: 'Issue, not planned',
pullClosed: 'Pull request',
pullMerged: 'Pull request',
draft: 'Pull request',
issueDraft: 'Issue',
pullQueued: 'Pull request',
unavailable: '',
}

const colorVariants = variant({
prop: 'status',
variants: {
Expand DownExpand 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
})
})
24 changes: 16 additions & 8 deletions packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand Up@@ -207,11 +210,12 @@ exports[`StateLabel respects the status prop 3`] = `
className="c0"
>
<svg
aria-hidden="true"
aria-label="Issue, not planned"
className="c1"
fill="currentColor"
focusable="false"
height={16}
role="img"
style={
{
"display": "inline-block",
Expand DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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