fix: don't apply alt on span element

Author: imorland

framework/core/js/src/common/helpers/avatar.tsx

@@ -22,12 +22,6 @@ export default function avatar(user: User | null, attrs: ComponentAttrs = {}): M
   const hasTitle: boolean | string = attrs.title === 'undefined' || attrs.title;
   if (!hasTitle) delete attrs.title;
 
-  // 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 set, we can default it later
-  // to the user's display name for accessibility.
-  const hasAlt: boolean | string = attrs.alt === 'undefined' || attrs.alt;
-  if (!hasAlt) delete attrs.alt;
-
   // 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
   // uploaded one.
@@ -37,25 +31,27 @@ export default function avatar(user: User | null, attrs: ComponentAttrs = {}): M
 
     if (hasTitle) attrs.title = attrs.title || username;
 
-    // If alt has not been explicitly set, default it to the username
-    // so screen readers have meaningful context.
-    if (attrs.alt === undefined) {
-      attrs.alt = 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.alt === 'undefined' || attrs.alt;
+    if (!hasAlt) delete attrs.alt;
 
     if (avatarUrl) {
+      // Default alt to username unless explicitly overridden.
+      if (attrs.alt === undefined) {
+        attrs.alt = username;
+      }
+
       return <img {...attrs} src={avatarUrl} />;
     }
 
     content = username.charAt(0).toUpperCase();
     attrs.style = { '--avatar-bg': user.color() };
-  } else {
-    // If there is no user, and no alt provided, set alt to an empty string
-    // so the avatar is treated as decorative.
-    if (attrs.alt === undefined) {
-      attrs.alt = '';
-    }
   }
 
+  // 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>;
 }