From 5144482eb315624ce090ae93232157e988f90700 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 23 Jul 2024 16:12:00 +0200
Subject: [PATCH] Add alt text to examples

---
 .../src/Avatar/Avatar.features.stories.tsx    | 86 ++++++++++++++-----
 packages/react/src/Avatar/Avatar.stories.tsx  |  1 +
 2 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/packages/react/src/Avatar/Avatar.features.stories.tsx b/packages/react/src/Avatar/Avatar.features.stories.tsx
index 73ddb570319..d9d85814c15 100644
--- a/packages/react/src/Avatar/Avatar.features.stories.tsx
+++ b/packages/react/src/Avatar/Avatar.features.stories.tsx
@@ -7,36 +7,76 @@ export default {
   component: Avatar,
 } as Meta<typeof Avatar>
 
-export const Square = () => <Avatar square src="https://avatars.githubusercontent.com/primer" />
+export const Square = () => <Avatar square alt="primer" src="https://avatars.githubusercontent.com/primer" />
 
 export const Size = () => (
   <div>
-    <Avatar size={4} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={8} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={12} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={16} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={20} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={24} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={28} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={32} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={40} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={48} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={56} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={64} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={4} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={8} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={12} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={16} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={20} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={24} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={28} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={32} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={40} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={48} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={56} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar size={64} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
   </div>
 )
 
 export const SizeResponsive = () => (
   <div>
-    <Avatar size={{narrow: 4, regular: 8, wide: 12}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 8, regular: 12, wide: 16}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 12, regular: 16, wide: 20}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 16, regular: 20, wide: 24}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 20, regular: 24, wide: 28}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 24, regular: 28, wide: 32}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 28, regular: 32, wide: 40}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 32, regular: 40, wide: 48}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 40, regular: 48, wide: 56}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
-    <Avatar size={{narrow: 48, regular: 56, wide: 64}} src="https://avatars.githubusercontent.com/u/92997159?v=4" />
+    <Avatar
+      size={{narrow: 4, regular: 8, wide: 12}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 8, regular: 12, wide: 16}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 12, regular: 16, wide: 20}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 16, regular: 20, wide: 24}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 20, regular: 24, wide: 28}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 24, regular: 28, wide: 32}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 28, regular: 32, wide: 40}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 32, regular: 40, wide: 48}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 40, regular: 48, wide: 56}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 48, regular: 56, wide: 64}}
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    />
   </div>
 )
diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx
index 0927696bd1b..476c118a998 100644
--- a/packages/react/src/Avatar/Avatar.stories.tsx
+++ b/packages/react/src/Avatar/Avatar.stories.tsx
@@ -24,6 +24,7 @@ export const Playground: StoryFn<Args> = args => {
       size={parseSizeFromArgs(args)}
       square={args.square}
       src="https://avatars.githubusercontent.com/u/92997159?v=4"
+      alt="mona"
     />
   )
 }