From e92b472cf559a4f16681c65ad4254de4759d8ed7 Mon Sep 17 00:00:00 2001
From: jessicanath <jessijessica4589@gmail.com>
Date: Wed, 29 Apr 2026 02:19:31 +0000
Subject: [PATCH] feat: add fallback copy when creator avatar image fails to
 load

- show 'No image' label below initials when image src fails
- use role=img + aria-label on fallback container for accessibility
- improve alt text on img element to include 'avatar' context
- no layout shift: fallback stays within same size-full container

Closes #172
---
 src/components/common/CreatorInitialsAvatar.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/common/CreatorInitialsAvatar.tsx b/src/components/common/CreatorInitialsAvatar.tsx
index a48ee74..c93318b 100644
--- a/src/components/common/CreatorInitialsAvatar.tsx
+++ b/src/components/common/CreatorInitialsAvatar.tsx
@@ -38,8 +38,10 @@ const CreatorInitialsAvatar: React.FC<CreatorInitialsAvatarProps> = ({
 	if (!imageSrc || hasError) {
 		return (
 			<div
+				role="img"
+				aria-label={`${name} avatar`}
 				className={cn(
-					'flex size-full items-center justify-center text-3xl font-black tracking-wide',
+					'flex size-full flex-col items-center justify-center gap-0.5 text-3xl font-black tracking-wide',
 					className
 				)}
 				style={{
@@ -47,7 +49,12 @@ const CreatorInitialsAvatar: React.FC<CreatorInitialsAvatarProps> = ({
 					color: fallbackColors.textColor,
 				}}
 			>
-				<span aria-label={`${name} initials avatar`}>{initials}</span>
+				<span aria-hidden="true">{initials}</span>
+				{hasError && (
+					<span className="text-[0.5rem] font-semibold uppercase tracking-widest opacity-60">
+						No image
+					</span>
+				)}
 			</div>
 		);
 	}
@@ -55,7 +62,7 @@ const CreatorInitialsAvatar: React.FC<CreatorInitialsAvatarProps> = ({
 	return (
 		<img
 			src={imageSrc}
-			alt={name}
+			alt={`${name} avatar`}
 			onError={() => setHasError(true)}
 			className={cn('size-full object-cover', imageClassName, className)}
 		/>