feat(room list item): use vm of NotificationDecoration in RoomListItemViewModel

Author: florianduros

src/components/viewmodels/roomlist/RoomListItemViewModel.tsx

@@ -12,6 +12,11 @@ import dispatcher from "../../../dispatcher/dispatcher";
 import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import { hasAccessToOptionsMenu } from "./utils";
+import {
+    type NotificationDecorationViewState,
+    useNotificationDecorationViewModel,
+} from "../notification_decoration/NotificationDecorationViewModel";
+import { _t } from "../../../languageHandler";
 
 export interface RoomListItemViewState {
     /**
@@ -22,6 +27,14 @@ export interface RoomListItemViewState {
      * Open the room having given roomId.
      */
     openRoom: () => void;
+    /**
+     * The a11y label for the room list item.
+     */
+    a11yLabel: string;
+    /**
+     * The notification state of the room.
+     */
+    notificationDecorationViewState: NotificationDecorationViewState;
 }
 
 /**
@@ -31,6 +44,11 @@ export interface RoomListItemViewState {
 export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
     // incoming: Check notification menu rights
     const showHoverMenu = hasAccessToOptionsMenu(room);
+    // Use the VM of the notification decoration because we need to put the a11y label on the room list item
+    // The VM is passed to the NotificationDecoration component by the RoomListItemView component
+    // This is a bit of a hack but it's the easiest way to avoid to put twice the same listeners to compute the same notification
+    const notificationDecorationViewState = useNotificationDecorationViewModel(room);
+    const a11yLabel = getA11yLabel(room, notificationDecorationViewState);
 
     // Actions
 
@@ -43,7 +61,38 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
     }, [room]);
 
     return {
+        notificationDecorationViewState,
         showHoverMenu,
         openRoom,
+        a11yLabel,
     };
 }
+
+/**
+ * Get the a11y label for the room list item
+ * @param room
+ * @param notificationDecorationViewState
+ */
+function getA11yLabel(room: Room, notificationDecorationViewState: NotificationDecorationViewState): string {
+    if (notificationDecorationViewState.isMessageNotSent) {
+        return _t("a11y|room_messsage_not_sent", {
+            roomName: room.name,
+        });
+    } else if (notificationDecorationViewState.isInvite) {
+        return _t("a11y|room_n_unread_invite", {
+            roomName: room.name,
+        });
+    } else if (notificationDecorationViewState.isHighlighted) {
+        return _t("a11y|room_n_unread_messages_mentions", {
+            roomName: room.name,
+            count: notificationDecorationViewState.rawUnreadCount,
+        });
+    } else if (notificationDecorationViewState.hasUnread) {
+        return _t("a11y|room_n_unread_messages", {
+            roomName: room.name,
+            count: notificationDecorationViewState.rawUnreadCount,
+        });
+    } else {
+        return _t("room_list|room|open_room", { roomName: room.name });
+    }
+}

src/i18n/strings/en_EN.json

@@ -12,6 +12,16 @@
             "other": "%(count)s unread messages including mentions."
         },
         "recent_rooms": "Recent rooms",
+        "room_messsage_not_sent": "Open room %(roomName)s with a message not sent",
+        "room_n_unread_invite": "Open room %(roomName)s invitation",
+        "room_n_unread_messages": {
+            "one": "Open room %(roomName)s with 1 unread message.",
+            "other": "Open room %(roomName)s with %(count)s unread messages."
+        },
+        "room_n_unread_messages_mentions": {
+            "one": "Open room %(roomName)s with 1 unread mention.",
+            "other": "Open room %(roomName)s with %(count)s unread messages including mentions."
+        },
         "room_name": "Room %(name)s",
         "room_status_bar": "Room status bar",
         "seek_bar_label": "Audio seek bar",