@linktr.ee/messaging-react 3.35.0-rc-1786106245 → 3.35.0-rc-1786109913

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B-fh4Zxu.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-AQNn2p5e.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-DAY8iAgG.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-CrdAtOBl.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.35.0-rc-1786106245",
+  "version": "3.35.0-rc-1786109913",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.4.0-rc-1786106245",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786109913",
     "@linktr.ee/messaging-taxonomy": "^0.7.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/RichCard/RichCard.test.tsx

@@ -46,10 +46,10 @@ describe('RichCard', () => {
       />
     )
     await screen.findByTestId('rich-card')
-    // Three <img> nodes render; only the first is labelled (the rest are
-    // decorative, alt="" + aria-hidden, so they're out of the a11y tree).
+    // Three <img> nodes render; all are decorative (alt=""), so the fan is out
+    // of the a11y tree — the accessible content is the card's title/subtitle.
     expect(container.querySelectorAll('img')).toHaveLength(3)
-    expect(screen.getByAltText('Collection')).toBeInTheDocument()
+    expect(screen.queryByAltText('Collection')).toBeNull()
   })
 
   it('drops a failed fan image and re-fans the survivors', async () => {
@@ -68,6 +68,42 @@ describe('RichCard', () => {
     expect(container.querySelectorAll('img')).toHaveLength(2)
   })
 
+  it('keeps fan thumbnails decorative (empty alt)', async () => {
+    const { container } = renderWithProviders(
+      <RichCard.Received
+        title="Collection"
+        images={[HERO, IMG_2, IMG_3]}
+        imagePresentation="fan"
+      />
+    )
+    await screen.findByTestId('rich-card')
+    const imgs = Array.from(container.querySelectorAll('img'))
+    expect(imgs).toHaveLength(3)
+    expect(imgs.every((img) => img.getAttribute('alt') === '')).toBe(true)
+  })
+
+  it('resets failed fan tiles when the image set changes', async () => {
+    const { container, rerender } = renderWithProviders(
+      <RichCard.Received
+        title="Collection"
+        images={[HERO, IMG_2, IMG_3]}
+        imagePresentation="fan"
+      />
+    )
+    await screen.findByTestId('rich-card')
+    fireEvent.error(container.querySelectorAll('img')[2])
+    expect(container.querySelectorAll('img')).toHaveLength(2)
+    // A recycled card with a new collection clears the stale failure tracking.
+    rerender(
+      <RichCard.Received
+        title="Collection"
+        images={['https://cdn.example.com/a.jpg', 'https://cdn.example.com/b.jpg', 'https://cdn.example.com/c.jpg']}
+        imagePresentation="fan"
+      />
+    )
+    expect(container.querySelectorAll('img')).toHaveLength(3)
+  })
+
   it('defaults presentation from image count (>=2 fans)', async () => {
     const { container } = renderWithProviders(
       <RichCard.Sent title="Two" images={[HERO, IMG_2]} />

package/src/components/RichCard/RichCardImages.tsx

@@ -50,9 +50,21 @@ const FAN_OFFSET_PX: Record<1 | 2 | 3, number[]> = {
 const RichCardFan: React.FC<{
   variant: LinkAttachmentVariant
   images: string[]
-  title?: string
-}> = ({ variant, images, title }) => {
+}> = ({ variant, images }) => {
   const [failed, setFailed] = React.useState<Record<number, boolean>>({})
+
+  // Reset the per-tile failure tracking when the image set changes, so a
+  // recycled card (same element, new collection) doesn't carry a previous
+  // array's failed indexes onto a valid replacement. Adjusting state during
+  // render on a key change is the endorsed alternative to a set-state effect
+  // (mirrors how `useChinPalette` clears `heroFailed` when `thumbnailUrl` changes).
+  const imagesKey = images.join('\n')
+  const [trackedKey, setTrackedKey] = React.useState(imagesKey)
+  if (imagesKey !== trackedKey) {
+    setTrackedKey(imagesKey)
+    setFailed({})
+  }
+
   const survivors = images
     .slice(0, 3)
     .map((src, index) => ({ src, index }))
@@ -75,8 +87,10 @@ const RichCardFan: React.FC<{
         <img
           key={`${src}-${index}`}
           src={optimizeMessagingAttachmentUrl(src) ?? src}
-          alt={index === 0 ? (title ?? '') : ''}
-          aria-hidden={index !== 0}
+          // Decorative: the card's title + subtitle carry the meaning, so the
+          // fan thumbnails are illustration only. Empty alt keeps them out of
+          // the accessibility tree (the accessible content is the text).
+          alt=""
           draggable={false}
           loading="lazy"
           decoding="async"
@@ -117,7 +131,7 @@ const RichCardImages: React.FC<RichCardImagesProps> = ({
 }) => (
   <div className={IMAGE_REGION_CLASS}>
     {presentation === 'fan' ? (
-      <RichCardFan variant={variant} images={images} title={title} />
+      <RichCardFan variant={variant} images={images} />
     ) : (
       // `heroUrl` is the palette-tracked source: it becomes `undefined` when the
       // hero image errors, so `CardThumbnail` falls through to its placeholder.