fix(a11y): give profile link a proper accessible name (#52109)

client/src/assets/icons/default-avatar.tsx

@@ -15,6 +15,7 @@ function DefaultAvatar(
       width='500px'
       xmlns='http://www.w3.org/2000/svg'
       xmlnsXlink='http://www.w3.org/1999/xlink'
+      aria-hidden='true'
       {...props}
     >
       <title>{t('icons.avatar')}</title>

client/src/components/helpers/avatar-renderer.tsx

@@ -9,12 +9,10 @@ interface AvatarRendererProps {
   isDonating?: boolean;
   isTopContributor?: boolean;
   picture: string;
-  userName: string;
 }
 
 function AvatarRenderer({
   picture,
-  userName,
   isDonating,
   isTopContributor
 }: AvatarRendererProps): JSX.Element {
@@ -44,14 +42,11 @@ function AvatarRenderer({
 
   return (
     <div className={`avatar-container ${borderColor}`}>
+      <span className='sr-only'>{t('buttons.profile')}</span>
       {isPlaceHolderImage ? (
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
-        <Image
-          alt={t('profile.avatar', { username: userName })}
-          className='avatar'
-          src={picture}
-        />
+        <Image alt='' className='avatar' src={picture} />
       )}
     </div>
   );

client/src/components/profile/__snapshots__/profile.test.tsx.snap

@@ -23,7 +23,13 @@ exports[`<Profile/> renders correctly 1`] = `
           <div
             class="avatar-container default-border"
           >
+            <span
+              class="sr-only"
+            >
+              buttons.profile
+            </span>
             <svg
+              aria-hidden="true"
               class="avatar default-avatar"
               height="500px"
               version="1.1"