diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
index faf8ac3..c66b972 100644
--- a/src/components/Avatar/Avatar.test.tsx
+++ b/src/components/Avatar/Avatar.test.tsx
@@ -91,6 +91,25 @@ describe('Avatar', () => {
).toBeInTheDocument();
});
+ it('trims alt before using it as the accessible name', () => {
+ render();
+
+ expect(screen.getByRole('img')).toHaveAccessibleName('Profile photo');
+ expect(screen.getByRole('img')).toHaveAttribute(
+ 'aria-label',
+ 'Profile photo',
+ );
+ });
+
+ it.each([
+ ['empty', ''],
+ ['whitespace-only', ' '],
+ ])('falls back to name when alt is %s', (_description, alt) => {
+ render();
+
+ expect(screen.getByRole('img')).toHaveAccessibleName('Ada Lovelace');
+ });
+
it('renders an image and falls back to fallbackSrc when it fails', () => {
render(
= 96,
});
- const accessibleName = alt ?? (showInitials ? name : undefined) ?? 'Avatar';
+ const normalizedAlt = alt?.trim();
+ const accessibleName =
+ (normalizedAlt === '' ? undefined : normalizedAlt) ??
+ (showInitials ? name : undefined) ??
+ 'Avatar';
const describedBy = isTooltipEnabled
? [ariaDescribedBy, tooltip.describedBy].filter(Boolean).join(' ')
: ariaDescribedBy;