Add accessible names to icon stories (#5621)

* Add accName to `CircleOcticon` * Add alt to `AvatarPair` examples
primer · Feb 3, 2025 · 7b644ce · 7b644ce
1 parent c9b0a72
commit 7b644ce
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx b/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx
@@ -10,14 +10,14 @@ export default {
 
 export const ParentCircle = () => (
   <AvatarPair>
-    <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar square src="https://avatars.githubusercontent.com/primer" />
+    <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="Primer avatar, parent" />
+    <Avatar square src="https://avatars.githubusercontent.com/primer" alt="Primer avatar, child" />
   </AvatarPair>
 )
 
 export const ParentSquare = () => (
   <AvatarPair>
-    <Avatar square src="https://avatars.githubusercontent.com/primer" />
-    <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+    <Avatar square src="https://avatars.githubusercontent.com/primer" alt="Primer avatar, parent" />
+    <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="Primer avatar, child" />
   </AvatarPair>
 )
diff --git a/packages/react/src/AvatarPair/AvatarPair.stories.tsx b/packages/react/src/AvatarPair/AvatarPair.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 export const Default = () => (
   <AvatarPair>
-    <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-    <Avatar src="https://avatars.githubusercontent.com/primer" />
+    <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="Primer avatar, parent" />
+    <Avatar src="https://avatars.githubusercontent.com/primer" alt="Primer avatar, child" />
   </AvatarPair>
 )
diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx
@@ -22,9 +22,11 @@ export const Default = () => (
 )
 
 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} />
-)
+export const Playground: StoryFn<PlaygroundTypes> = ({
+  icon: iconName,
+  'aria-label': ariaLabel = 'Changes approved',
+  ...args
+}) => <CircleOcticon icon={Icons[iconName]} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
 
 Playground.args = {
   size: 32,