From 7b644ceb708d88ba34778adc49db50b51c429e87 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 3 Feb 2025 10:58:07 -0500
Subject: [PATCH] Add accessible names to icon stories (#5621)

* Add accName to `CircleOcticon`

* Add alt to `AvatarPair` examples
---
 .../react/src/AvatarPair/AvatarPair.features.stories.tsx  | 8 ++++----
 packages/react/src/AvatarPair/AvatarPair.stories.tsx      | 4 ++--
 .../react/src/CircleOcticon/CircleOcticon.stories.tsx     | 8 +++++---
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx b/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx
index 1b0fadfdff2..19d6428eeda 100644
--- 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
index 3184e529f78..d20f059817c 100644
--- 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
index 4aca5c5a5eb..9d9b15c73fa 100644
--- 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,