fix(accessibility): add right title/alt (#7094)

nodejs · Oct 8, 2024 · 5b77c34 · 5b77c34
1 parent c6e97a1
commit 5b77c34
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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