Octicon remediation: aria-label (#4811)

* correct aria-label

* fix playground for Octicon and CircleOcticon

* CicleOcticon: move aria-label to the icon, not the container

* clean up aria-label in playground

* clean up meta for CircleBadge

* CircleBadge.Icon story: add aria-label in playground

* Create cool-lobsters-nail.md

* add aria-label to circle badge default story

* add aria-label to CircleOcticon default story

Author: siddharthkp

.changeset/cool-lobsters-nail.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Octicon: Add aria-label to the Icon instead of it's container

packages/react/src/CircleBadge/CircleBadge.stories.tsx

@@ -3,20 +3,21 @@ import type {Meta, StoryFn} from '@storybook/react'
 import CircleBadge from './CircleBadge'
 import {ZapIcon} from '@primer/octicons-react'
 
-export default {
+const meta: Meta<typeof CircleBadge> = {
   title: 'Components/CircleBadge',
   component: CircleBadge,
-} as Meta<typeof CircleBadge>
+}
+export default meta
 
 export const Default = () => (
   <CircleBadge>
-    <CircleBadge.Icon icon={ZapIcon} />
+    <CircleBadge.Icon icon={ZapIcon} aria-label="User badge" />
   </CircleBadge>
 )
 
-export const Playground: StoryFn<typeof CircleBadge> = args => (
+export const Playground: StoryFn<typeof CircleBadge> = ({'CircleBadge.Icon aria-label': iconAriaLabel, args}) => (
   <CircleBadge {...args}>
-    <CircleBadge.Icon icon={ZapIcon} />
+    <CircleBadge.Icon icon={ZapIcon} aria-label={iconAriaLabel} />
   </CircleBadge>
 )
 
@@ -25,6 +26,7 @@ Playground.args = {
   size: null,
   inline: false,
   as: 'div',
+  'CircleBadge.Icon aria-label': undefined,
 }
 
 Playground.argTypes = {
@@ -44,4 +46,7 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  'CircleBadge.Icon aria-label': {
+    type: 'string',
+  },
 }

packages/react/src/CircleOcticon/CircleOcticon.stories.tsx

@@ -1,59 +1,54 @@
 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<typeof CircleOcticon> = {
   title: 'Components/CircleOcticon',
   component: CircleOcticon,
-} as Meta<typeof CircleOcticon>
+}
+export default meta
 
 export const Default = () => (
-  <CircleOcticon icon={CheckIcon} size={32} sx={{backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}} />
+  <CircleOcticon
+    icon={CheckIcon}
+    size={32}
+    sx={{backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}}
+    aria-label="Changes approved"
+  />
 )
 
-export const Playground: StoryFn<typeof CircleOcticon> = args => <CircleOcticon {...args} />
+type PlaygroundTypes = Omit<CircleOcticonProps, 'icon'> & {icon: keyof typeof Icons}
+export const Playground: StoryFn<PlaygroundTypes> = ({icon: iconName, 'aria-label': ariaLabel, ...args}) => (
+  <CircleOcticon icon={Icons[iconName]} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
+)
 
 Playground.args = {
-  icon: CheckIcon,
   size: 32,
+  icon: 'CheckIcon',
+  'aria-label': undefined,
   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,
+  icon: {
+    control: {
+      type: 'select',
     },
+    options: Object.keys(Icons),
   },
-  ref: {
-    controls: false,
-    table: {
-      disable: true,
-    },
+  'aria-label': {
+    type: 'string',
   },
-  theme: {
+  sx: {
     controls: false,
-    table: {
-      disable: true,
-    },
   },
 }

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 (
     <Box
       as={as}
@@ -23,7 +23,7 @@ function CircleOcticon(props: CircleOcticonProps) {
       borderColor="border.default"
     >
       <Box display="flex" as={as} size={size} {...rest} alignItems="center" justifyContent="center">
-        <IconComponent size={size} />
+        <IconComponent size={size} aria-label={ariaLabel} />
       </Box>
     </Box>
   )

packages/react/src/Octicon/Octicon.stories.tsx

@@ -3,17 +3,20 @@ import type {Meta, StoryFn} from '@storybook/react'
 import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
 
-export default {
+const meta: Meta<typeof Octicon> = {
   title: 'Components/Octicon',
   component: Octicon,
-} as Meta<typeof Octicon>
+}
+export default meta
 
-export const Default = () => <Octicon icon={HeartFillIcon} size={32} />
+export const Default = () => <Octicon icon={HeartFillIcon} aria-label="Like" size={32} />
 
-export const Playground: StoryFn<typeof Octicon> = args => <Octicon icon={HeartFillIcon} {...args} />
+export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, ...args}) => (
+  <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
+)
 
 Playground.args = {
-  ariaLabel: 'Heart',
+  'aria-label': 'Heart',
   size: 32,
 }
 
@@ -25,6 +28,8 @@ Playground.argTypes = {
   },
   verticalAlign: {
     type: 'string',
+    control: {type: 'select'},
+    options: ['middle', 'text-bottom', 'text-top', 'top', 'unset'],
   },
   icon: {
     controls: false,