From 5b77c34fb91ec4e6aeadf2ab598af5c77dea7236 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Tue, 8 Oct 2024 22:43:47 +0200
Subject: [PATCH] fix(accessibility): add right title/alt (#7094)

---
 apps/site/components/Common/AvatarGroup/Avatar/index.tsx | 6 ++++--
 apps/site/components/Common/AvatarGroup/index.tsx        | 5 +++--
 apps/site/components/withMetaBar.tsx                     | 3 +--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.tsx b/apps/site/components/Common/AvatarGroup/Avatar/index.tsx
index 36122f839126f..4837f9b40b585 100644
--- a/apps/site/components/Common/AvatarGroup/Avatar/index.tsx
+++ b/apps/site/components/Common/AvatarGroup/Avatar/index.tsx
@@ -6,18 +6,20 @@ import styles from './index.module.css';
 export type AvatarProps = {
   src: string;
   alt: string;
+  fallback: string;
 };
 
-const Avatar: FC<AvatarProps> = ({ src, alt }) => (
+const Avatar: FC<AvatarProps> = ({ src, alt, fallback }) => (
   <RadixAvatar.Root className={styles.avatarRoot}>
     <RadixAvatar.Image
       loading="lazy"
       src={src}
       alt={alt}
+      title={alt}
       className={styles.avatar}
     />
     <RadixAvatar.Fallback delayMs={500} className={styles.avatar}>
-      {alt}
+      {fallback}
     </RadixAvatar.Fallback>
   </RadixAvatar.Root>
 );
diff --git a/apps/site/components/Common/AvatarGroup/index.tsx b/apps/site/components/Common/AvatarGroup/index.tsx
index b7172ec8dfc6b..4dea98b700d5d 100644
--- a/apps/site/components/Common/AvatarGroup/index.tsx
+++ b/apps/site/components/Common/AvatarGroup/index.tsx
@@ -11,7 +11,7 @@ import { getAcronymFromString } from '@/util/stringUtils';
 import styles from './index.module.css';
 
 type AvatarGroupProps = {
-  avatars: Array<ComponentProps<typeof Avatar>>;
+  avatars: Array<Omit<ComponentProps<typeof Avatar>, 'fallback'>>;
   limit?: number;
   isExpandable?: boolean;
 };
@@ -33,7 +33,8 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
       {renderAvatars.map((avatar, index) => (
         <Avatar
           src={avatar.src}
-          alt={getAcronymFromString(avatar.alt)}
+          alt={avatar.alt}
+          fallback={getAcronymFromString(avatar.alt)}
           key={index}
         />
       ))}
diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx
index f4db3091a77e7..543d901d55f4b 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/withMetaBar.tsx
@@ -10,7 +10,6 @@ import { useClientContext } from '@/hooks/react-client';
 import useMediaQuery from '@/hooks/react-client/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
 import { getGitHubBlobUrl, getGitHubAvatarUrl } from '@/util/gitHubUtils';
-import { getAcronymFromString } from '@/util/stringUtils';
 
 const WithMetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
@@ -23,7 +22,7 @@ const WithMetaBar: FC = () => {
     frontmatter.authors?.split(',').map(author => author.trim()) ?? [];
   const avatars = usernames.map(username => ({
     src: getGitHubAvatarUrl(username),
-    alt: getAcronymFromString(username),
+    alt: username,
   }));
 
   // Doing that because on mobile list on top of page and on desktop list on the right side