From 5a7678d8fd31ff7385bbb5565adcafdf1268dc50 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 13:08:39 +0200 Subject: [PATCH 1/9] correct aria-label --- packages/react/src/Octicon/Octicon.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx index 0574fbe3e48..1c875e53b02 100644 --- a/packages/react/src/Octicon/Octicon.stories.tsx +++ b/packages/react/src/Octicon/Octicon.stories.tsx @@ -8,12 +8,12 @@ export default { component: Octicon, } as Meta -export const Default = () => +export const Default = () => export const Playground: StoryFn = args => Playground.args = { - ariaLabel: 'Heart', + 'aria-label': 'Heart', size: 32, } From 81dd29e9019737e950b0f30fdae601ace1262523 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 14:17:04 +0200 Subject: [PATCH 2/9] fix playground for Octicon and CircleOcticon --- .../CircleOcticon/CircleOcticon.stories.tsx | 46 +++++++------------ .../react/src/Octicon/Octicon.stories.tsx | 7 ++- 2 files changed, 21 insertions(+), 32 deletions(-) diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx index d2e403abaa2..c402da8f250 100644 --- a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx +++ b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx @@ -1,59 +1,45 @@ import React from 'react' import type {Meta, StoryFn} from '@storybook/react' import CircleOcticon from './CircleOcticon' +import type {CircleOcticonProps} from './CircleOcticon' import {CheckIcon} from '@primer/octicons-react' +// eslint-disable-next-line import/no-namespace +import * as Icons from '@primer/octicons-react' -export default { +const meta: Meta = { title: 'Components/CircleOcticon', component: CircleOcticon, -} as Meta +} +export default meta export const Default = () => ( ) -export const Playground: StoryFn = args => +type PlaygroundTypes = Omit & {icon: keyof typeof Icons} +export const Playground: StoryFn = ({icon: iconName, ...args}) => ( + +) Playground.args = { - icon: CheckIcon, size: 32, + icon: 'CheckIcon', sx: {backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}, } Playground.argTypes = { - icon: { - controls: false, - table: { - disable: true, - }, - }, size: { controls: { type: 'number', }, }, - sx: { - controls: false, - table: { - disable: true, - }, - }, - as: { - controls: false, - table: { - disable: true, - }, - }, - ref: { - controls: false, - table: { - disable: true, + icon: { + control: { + type: 'select', }, + options: Object.keys(Icons), }, - theme: { + sx: { controls: false, - table: { - disable: true, - }, }, } diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx index 1c875e53b02..c2f7419816f 100644 --- a/packages/react/src/Octicon/Octicon.stories.tsx +++ b/packages/react/src/Octicon/Octicon.stories.tsx @@ -3,10 +3,11 @@ import type {Meta, StoryFn} from '@storybook/react' import Octicon from './Octicon' import {HeartFillIcon} from '@primer/octicons-react' -export default { +const meta: Meta = { title: 'Components/Octicon', component: Octicon, -} as Meta +} +export default meta export const Default = () => @@ -25,6 +26,8 @@ Playground.argTypes = { }, verticalAlign: { type: 'string', + control: {type: 'select'}, + options: ['middle', 'text-bottom', 'text-top', 'top', 'unset'], }, icon: { controls: false, From 3432a9bb51f4135884c953b94890f51cde20fe62 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 14:28:13 +0200 Subject: [PATCH 3/9] CicleOcticon: move aria-label to the icon, not the container --- packages/react/src/CircleOcticon/CircleOcticon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/CircleOcticon/CircleOcticon.tsx b/packages/react/src/CircleOcticon/CircleOcticon.tsx index 970e69d138a..3308d82a149 100644 --- a/packages/react/src/CircleOcticon/CircleOcticon.tsx +++ b/packages/react/src/CircleOcticon/CircleOcticon.tsx @@ -10,7 +10,7 @@ export type CircleOcticonProps = { } & BoxProps function CircleOcticon(props: CircleOcticonProps) { - const {size = 32, as, icon: IconComponent, bg, ...rest} = props + const {size = 32, as, icon: IconComponent, bg, 'aria-label': ariaLabel, ...rest} = props return ( - + ) From 6a9cbd467e2e5532df538221aa5a779d5d647bb5 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 14:28:24 +0200 Subject: [PATCH 4/9] clean up aria-label in playground --- .../react/src/CircleOcticon/CircleOcticon.stories.tsx | 8 ++++++-- packages/react/src/Octicon/Octicon.stories.tsx | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx index c402da8f250..5bb2a9f9221 100644 --- a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx +++ b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx @@ -17,13 +17,14 @@ export const Default = () => ( ) type PlaygroundTypes = Omit & {icon: keyof typeof Icons} -export const Playground: StoryFn = ({icon: iconName, ...args}) => ( - +export const Playground: StoryFn = ({icon: iconName, 'aria-label': ariaLabel, ...args}) => ( + ) Playground.args = { size: 32, icon: 'CheckIcon', + 'aria-label': undefined, sx: {backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}, } @@ -39,6 +40,9 @@ Playground.argTypes = { }, options: Object.keys(Icons), }, + 'aria-label': { + type: 'string', + }, sx: { controls: false, }, diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx index c2f7419816f..18f9fb6a0e4 100644 --- a/packages/react/src/Octicon/Octicon.stories.tsx +++ b/packages/react/src/Octicon/Octicon.stories.tsx @@ -11,7 +11,9 @@ export default meta export const Default = () => -export const Playground: StoryFn = args => +export const Playground: StoryFn = ({'aria-label': ariaLabel, ...args}) => ( + +) Playground.args = { 'aria-label': 'Heart', From 43067f71324e77328de49b10f3373606b3abf7a9 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 14:28:30 +0200 Subject: [PATCH 5/9] clean up meta for CircleBadge --- packages/react/src/CircleBadge/CircleBadge.stories.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.stories.tsx b/packages/react/src/CircleBadge/CircleBadge.stories.tsx index 04bfc211f8a..23691ac809d 100644 --- a/packages/react/src/CircleBadge/CircleBadge.stories.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.stories.tsx @@ -3,10 +3,11 @@ import type {Meta, StoryFn} from '@storybook/react' import CircleBadge from './CircleBadge' import {ZapIcon} from '@primer/octicons-react' -export default { +const meta: Meta = { title: 'Components/CircleBadge', component: CircleBadge, -} as Meta +} +export default meta export const Default = () => ( From eb8b644a6118ced13ef23e2d7e2aef15aefb181f Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 14:39:20 +0200 Subject: [PATCH 6/9] CircleBadge.Icon story: add aria-label in playground --- packages/react/src/CircleBadge/CircleBadge.stories.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.stories.tsx b/packages/react/src/CircleBadge/CircleBadge.stories.tsx index 23691ac809d..67e31c99a7b 100644 --- a/packages/react/src/CircleBadge/CircleBadge.stories.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.stories.tsx @@ -15,9 +15,9 @@ export const Default = () => ( ) -export const Playground: StoryFn = args => ( +export const Playground: StoryFn = ({'CircleBadge.Icon aria-label': iconAriaLabel, args}) => ( - + ) @@ -26,6 +26,7 @@ Playground.args = { size: null, inline: false, as: 'div', + 'CircleBadge.Icon aria-label': undefined, } Playground.argTypes = { @@ -45,4 +46,7 @@ Playground.argTypes = { type: 'boolean', }, }, + 'CircleBadge.Icon aria-label': { + type: 'string', + }, } From 98b6fedeed1f9405e5515d9fde400b19776d2cb6 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 2 Aug 2024 14:44:21 +0200 Subject: [PATCH 7/9] Create cool-lobsters-nail.md --- .changeset/cool-lobsters-nail.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cool-lobsters-nail.md diff --git a/.changeset/cool-lobsters-nail.md b/.changeset/cool-lobsters-nail.md new file mode 100644 index 00000000000..e19428682b9 --- /dev/null +++ b/.changeset/cool-lobsters-nail.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Octicon: Add aria-label to the Icon instead of it's container From ce8073bd0a2e9b3a1dd4f37686351a1964dcab64 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 14 Aug 2024 16:25:15 +0200 Subject: [PATCH 8/9] add aria-label to circle badge default story --- packages/react/src/CircleBadge/CircleBadge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.stories.tsx b/packages/react/src/CircleBadge/CircleBadge.stories.tsx index 67e31c99a7b..00e1919b132 100644 --- a/packages/react/src/CircleBadge/CircleBadge.stories.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.stories.tsx @@ -11,7 +11,7 @@ export default meta export const Default = () => ( - + ) From a395b0f1315a37581fedfc7e706ba36595822992 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 14 Aug 2024 16:27:26 +0200 Subject: [PATCH 9/9] add aria-label to CircleOcticon default story --- packages/react/src/CircleOcticon/CircleOcticon.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx index 5bb2a9f9221..4aca5c5a5eb 100644 --- a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx +++ b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx @@ -13,7 +13,12 @@ const meta: Meta = { export default meta export const Default = () => ( - + ) type PlaygroundTypes = Omit & {icon: keyof typeof Icons}