fix(a11y): missing default alt text for avatar (#4243)

Author: imorland

framework/core/js/src/common/components/Avatar.tsx

@@ -19,8 +19,8 @@ export default class Avatar<CustomAttrs extends IAvatarAttrs = IAvatarAttrs> ext
     // If the `title` attribute is set to null or false, we don't want to give the
     // avatar a title. On the other hand, if it hasn't been given at all, we can
     // safely default it to the user's username.
-    const hasTitle: boolean | string = attrs.title === 'undefined' || attrs.title;
-    if (!hasTitle) delete attrs.title;
+    const hasTitle: boolean | string = (attrs as any).title === 'undefined' || (attrs as any).title;
+    if (!hasTitle) delete (attrs as any).title;
 
     // If a user has been passed, then we will set up an avatar using their
     // uploaded image, or the first letter of their username if they haven't
@@ -29,16 +29,30 @@ export default class Avatar<CustomAttrs extends IAvatarAttrs = IAvatarAttrs> ext
       const username = user.displayName() || '?';
       const avatarUrl = user.avatarUrl();
 
-      if (hasTitle) attrs.title = attrs.title || username;
+      if (hasTitle) (attrs as any).title = (attrs as any).title || username;
+
+      // Alt text logic:
+      // If the `alt` attribute is set to null or false, we don't want to give the
+      // avatar an alt description. If it hasn't been provided, we'll default it to
+      // the user's display name *when rendering an <img>* so screen readers have context.
+      const hasAlt: boolean | string = (attrs as any).alt === 'undefined' || (attrs as any).alt;
+      if (!hasAlt) delete (attrs as any).alt;
 
       if (avatarUrl) {
-        return <img {...attrs} src={avatarUrl} alt="" />;
+        // Default alt to username unless explicitly overridden.
+        if ((attrs as any).alt === undefined) {
+          (attrs as any).alt = username;
+        }
+
+        return <img {...attrs} src={avatarUrl} />;
       }
 
       content = username.charAt(0).toUpperCase();
       attrs.style = !window.testing && { '--avatar-bg': user.color() };
     }
 
+    // Note: We intentionally do NOT set `alt` when rendering the fallback <span>,
+    // as `alt` is only valid for certain elements (e.g., <img>, <area>, <input type="image">).
     return <span {...attrs}>{content}</span>;
   }
 }