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;