@linktr.ee/messaging-react 1.21.0 → 1.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelList/CustomChannelPreview.stories.tsx

@@ -262,7 +262,8 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantName: 'Alice Urgent',
       participantId: 'participant-urgent',
       participantImage: 'https://i.pravatar.cc/150?img=36',
-      lastMessageText: 'Critical issue needs immediate attention!',
+      lastMessageText:
+        'Critical issue needs immediate attention! Please review the server logs for more details and escalate to the on-call engineer. This system outage is affecting multiple users, and we need to resolve it as soon as possible. Impacted services include messaging, notifications, and real-time updates. All hands are required to investigate and remediate the situation. If you have any questions or need additional resources, contact the incident commander immediately!',
       lastMessageTime: new Date(Date.now() - 1000 * 60), // 1 minute ago
       lastMessageMetadata: { custom_type: 'MESSAGE_URGENT' },
       unreadCount: 3,

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -36,6 +36,15 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
         onChannelSelect(channel)
       }
     }
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      const isActivationKey = event.key === 'Enter' || event.key === ' '
+      const isRepeatedKeydown = event.repeat
+
+      if (!isActivationKey || isRepeatedKeydown) return
+
+      event.preventDefault()
+      handleClick()
+    }
 
     // Get participant info
     const members = Object.values(channel?.state?.members || {})
@@ -96,9 +105,11 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
     }
 
     return (
-      <button
-        type="button"
+      <div
+        role="button"
+        tabIndex={0}
         onClick={handleClick}
+        onKeyDown={handleKeyDown}
         className={classNames(
           'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring',
           {
@@ -149,7 +160,7 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
             </div>
           </div>
         </div>
-      </button>
+      </div>
     )
   }
 )