Implement new Read Receipt design (#8389)

* feat: introduce new alignment types for tooltip
* feat: introduce new hook for tooltips
* feat: allow using onFocus callback for RovingAccessibleButton
* feat: allow using custom class for ContextMenu
* feat: allow setting tab index for avatar
* refactor: move read receipts out of event tile
* feat: implement new read receipt design
* feat: update SentReceipt to match new read receipts as well

res/css/_components.scss

@@ -248,6 +248,7 @@
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PresenceLabel.scss";
+@import "./views/rooms/_ReadReceiptGroup.scss";
 @import "./views/rooms/_RecentlyViewedButton.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_ReplyTile.scss";

res/css/views/right_panel/_TimelineCard.scss

@@ -125,8 +125,8 @@ limitations under the License.
         padding-left: 36px;
     }
 
-    .mx_EventTile_readAvatars {
+    .mx_ReadReceiptGroup {
-        top: -10px;
+        top: -6px;
     }
 
     .mx_WhoIsTypingTile {

res/css/views/rooms/_EventBubbleTile.scss

@@ -447,7 +447,7 @@ limitations under the License.
         }
     }
 
-    .mx_EventTile_readAvatars {
+    .mx_ReadReceiptGroup {
         position: absolute;
         right: -78px; // as close to right gutter without clipping as possible
         bottom: 0;
@@ -585,8 +585,8 @@ limitations under the License.
             right: 127px; // align with that of right-column bubbles
         }
 
-        .mx_EventTile_readAvatars {
+        .mx_ReadReceiptGroup {
-            right: -18px; // match alignment to RRs of chat bubbles
+            right: -14px; // match alignment to RRs of chat bubbles
         }
 
         &::before {

res/css/views/rooms/_EventTile.scss

@@ -22,20 +22,18 @@ $left-gutter: 64px;
 
     .mx_EventTile_receiptSent,
     .mx_EventTile_receiptSending {
-        // Give it some dimensions so the tooltip can position properly
+        position: relative;
         display: inline-block;
-        width: 14px;
+        width: 16px;
-        height: 14px;
+        height: 16px;
-        // We don't use `position: relative` on the element because then it won't line
-        // up with the other read receipts
 
         &::before {
             background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-position: center;
-            mask-size: 14px;
+            mask-size: 16px;
-            width: 14px;
+            width: 16px;
-            height: 14px;
+            height: 16px;
             content: '';
             position: absolute;
             top: 0;
@@ -349,36 +347,6 @@ $left-gutter: 64px;
     }
 }
 
-.mx_EventTile_readAvatars {
-    position: relative;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    // This aligns the avatar with the last line of the
-    // message. We want to move it one line up - 2.2rem
-    top: -2.2rem;
-    user-select: none;
-    z-index: 1;
-}
-
-.mx_EventTile_readAvatars .mx_BaseAvatar {
-    position: absolute;
-    display: inline-block;
-    height: $font-14px;
-    width: $font-14px;
-
-    will-change: left, top;
-    transition:
-        left var(--transition-short) ease-out,
-        top var(--transition-standard) ease-out;
-}
-
-.mx_EventTile_readAvatarRemainder {
-    color: $event-timestamp-color;
-    font-size: $font-11px;
-    position: absolute;
-}
-
 .mx_EventTile_bigEmoji {
     font-size: 48px;
     line-height: 57px;

res/css/views/rooms/_GroupLayout.scss

@@ -97,7 +97,7 @@ $left-gutter: 64px;
             top: 3px;
         }
 
-        .mx_EventTile_readAvatars {
+        .mx_ReadReceiptGroup {
             // This aligns the avatar with the last line of the
             // message. We want to move it one line up - 2rem
             top: -2rem;

res/css/views/rooms/_IRCLayout.scss

@@ -49,8 +49,8 @@ $irc-line-height: $font-18px;
             order: 5;
             flex-shrink: 0;
 
-            .mx_EventTile_readAvatars {
+            .mx_ReadReceiptGroup {
-                top: 0.2rem; // ($irc-line-height - avatar height) / 2
+                top: -0.3rem; // ($irc-line-height - avatar height) / 2
             }
         }
 

res/css/views/rooms/_ReadReceiptGroup.scss

@@ -0,0 +1,146 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ReadReceiptGroup {
+    position: relative;
+    display: inline-block;
+    // This aligns the avatar with the last line of the
+    // message. We want to move it one line up
+    // See .mx_GroupLayout .mx_EventTile .mx_EventTile_line in _GroupLayout.scss
+    top: calc(-$font-22px - 3px);
+    user-select: none;
+    z-index: 1;
+
+    .mx_ReadReceiptGroup_button {
+        display: inline-flex;
+        flex-direction: row;
+        height: 16px;
+        padding: 4px;
+        border-radius: 6px;
+
+        &.mx_AccessibleButton {
+            &:hover {
+                background: $event-selected-color;
+            }
+        }
+    }
+
+    .mx_ReadReceiptGroup_remainder {
+        color: $secondary-content;
+        font-size: $font-11px;
+        line-height: $font-16px;
+        margin-right: 4px;
+    }
+
+    .mx_ReadReceiptGroup_container {
+        position: relative;
+        display: block;
+        height: 100%;
+
+        .mx_BaseAvatar {
+            position: absolute;
+            display: inline-block;
+            height: 14px;
+            width: 14px;
+            border: 1px solid $background;
+            border-radius: 100%;
+
+            will-change: left, top;
+            transition:
+                left var(--transition-short) ease-out,
+                top var(--transition-standard) ease-out;
+        }
+    }
+}
+
+.mx_ReadReceiptGroup_popup {
+    max-height: 300px;
+    width: 220px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    font-size: 12px;
+    line-height: 15px;
+
+    right: 0;
+
+    &.mx_ContextualMenu_top {
+        top: 8px;
+    }
+
+    &.mx_ContextualMenu_bottom {
+        bottom: 8px;
+    }
+
+    .mx_ReadReceiptGroup_title {
+        font-size: 12px;
+        line-height: 15px;
+        margin: 16px 16px 8px;
+        font-weight: 600;
+        // shouldn’t be actually focusable
+        outline: none;
+    }
+
+    .mx_AutoHideScrollbar {
+        .mx_ReadReceiptGroup_person {
+            display: flex;
+            flex-direction: row;
+            padding: 4px;
+            margin: 0 12px;
+            border-radius: 8px;
+
+            &:hover {
+                background: $menu-selected-color;
+            }
+
+            &:last-child {
+                margin-bottom: 8px;
+            }
+
+            .mx_BaseAvatar {
+                margin: 6px 8px;
+                align-self: center;
+                justify-self: center;
+            }
+
+            .mx_ReadReceiptGroup_name {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                flex-shrink: 1;
+                overflow: hidden;
+
+                p {
+                    margin: 2px 0;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+
+                .mx_ReadReceiptGroup_secondary {
+                    color: $secondary-content;
+                }
+            }
+        }
+    }
+}
+
+.mx_ReadReceiptGroup_person--tooltip {
+    overflow-y: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/accessibility/roving/RovingAccessibleButton.tsx

@@ -20,13 +20,21 @@ import AccessibleButton from "../../components/views/elements/AccessibleButton";
 import { useRovingTabIndex } from "../RovingTabIndex";
 import { Ref } from "./types";
 
-interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "onFocus" | "inputRef" | "tabIndex"> {
+interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "inputRef" | "tabIndex"> {
     inputRef?: Ref;
 }
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
-export const RovingAccessibleButton: React.FC<IProps> = ({ inputRef, ...props }) => {
+export const RovingAccessibleButton: React.FC<IProps> = ({ inputRef, onFocus, ...props }) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
-    return <AccessibleButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
+    return <AccessibleButton
+        {...props}
+        onFocus={event => {
+            onFocusInternal();
+            onFocus?.(event);
+        }}
+        inputRef={ref}
+        tabIndex={isActive ? 0 : -1}
+    />;
 };
 

src/accessibility/roving/RovingAccessibleTooltipButton.tsx

@@ -21,13 +21,21 @@ import { useRovingTabIndex } from "../RovingTabIndex";
 import { Ref } from "./types";
 
 type ATBProps = React.ComponentProps<typeof AccessibleTooltipButton>;
-interface IProps extends Omit<ATBProps, "onFocus" | "inputRef" | "tabIndex"> {
+interface IProps extends Omit<ATBProps, "inputRef" | "tabIndex"> {
     inputRef?: Ref;
 }
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
-export const RovingAccessibleTooltipButton: React.FC<IProps> = ({ inputRef, ...props }) => {
+export const RovingAccessibleTooltipButton: React.FC<IProps> = ({ inputRef, onFocus, ...props }) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
-    return <AccessibleTooltipButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
+    return <AccessibleTooltipButton
+        {...props}
+        onFocus={event => {
+            onFocusInternal();
+            onFocus?.(event);
+        }}
+        inputRef={ref}
+        tabIndex={isActive ? 0 : -1}
+    />;
 };
 

src/components/structures/ContextMenu.tsx

@@ -82,6 +82,7 @@ export interface IProps extends IPosition {
     // whether this context menu should be focus managed. If false it must handle itself
     managed?: boolean;
     wrapperClassName?: string;
+    menuClassName?: string;
 
     // If true, this context menu will be mounted as a child to the parent container. Otherwise
     // it will be mounted to a container at the root of the DOM.
@@ -319,7 +320,7 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
             'mx_ContextualMenu_withChevron_bottom': chevronFace === ChevronFace.Bottom,
             'mx_ContextualMenu_rightAligned': this.props.rightAligned === true,
             'mx_ContextualMenu_bottomAligned': this.props.bottomAligned === true,
-        });
+        }, this.props.menuClassName);
 
         const menuStyle: CSSProperties = {};
         if (props.menuWidth) {

src/components/views/avatars/BaseAvatar.tsx

@@ -45,6 +45,7 @@ interface IProps {
     onClick?: React.MouseEventHandler;
     inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
     className?: string;
+    tabIndex?: number;
 }
 
 const calculateUrls = (url, urls, lowBandwidth) => {

src/components/views/avatars/MemberAvatar.tsx

@@ -43,6 +43,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     title?: string;
     style?: any;
     forceHistorical?: boolean; // true to deny `feature_use_only_current_profiles` usage. Default false.
+    hideTitle?: boolean;
 }
 
 interface IState {
@@ -124,7 +125,7 @@ export default class MemberAvatar extends React.PureComponent<IProps, IState> {
             <BaseAvatar
                 {...otherProps}
                 name={this.state.name}
-                title={this.state.title}
+                title={this.props.hideTitle ? undefined : this.state.title}
                 idName={userId}
                 url={this.state.imageUrl}
                 onClick={onClick}

src/components/views/elements/Tooltip.tsx

@@ -32,6 +32,8 @@ export enum Alignment {
     Top, // Centered
     Bottom, // Centered
     InnerBottom, // Inside the target, at the bottom
+    TopRight, // On top of the target, right aligned
+    TopCenter, // On top of the target, center aligned
 }
 
 export interface ITooltipProps {
@@ -149,6 +151,16 @@ export default class Tooltip extends React.Component<ITooltipProps> {
                 style.top = baseTop + parentBox.height - 50;
                 style.left = horizontalCenter;
                 style.transform = "translate(-50%)";
+                break;
+            case Alignment.TopRight:
+                style.top = baseTop - 5;
+                style.right = width - parentBox.right - window.pageXOffset;
+                style.transform = "translate(5px, -100%)";
+                break;
+            case Alignment.TopCenter:
+                style.top = baseTop - 5;
+                style.left = horizontalCenter;
+                style.transform = "translate(-50%, -100%)";
         }
 
         return style;

src/components/views/rooms/EventTile.tsx

@@ -36,12 +36,11 @@ import { formatTime } from "../../../DateUtils";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { E2EState } from "./E2EIcon";
-import { toRem } from "../../../utils/units";
 import RoomAvatar from "../avatars/RoomAvatar";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
 import { aboveRightOf } from '../../structures/ContextMenu';
 import { objectHasDiff } from "../../../utils/objects";
-import Tooltip from "../elements/Tooltip";
+import Tooltip, { Alignment } from "../elements/Tooltip";
 import EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
@@ -54,7 +53,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import SenderProfile from '../messages/SenderProfile';
 import MessageTimestamp from '../messages/MessageTimestamp';
 import TooltipButton from '../elements/TooltipButton';
-import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
+import { IReadReceiptInfo } from "./ReadReceiptMarker";
 import MessageActionBar from "../messages/MessageActionBar";
 import ReactionsRow from '../messages/ReactionsRow';
 import { getEventDisplayInfo } from '../../../utils/EventRenderingUtils';
@@ -79,6 +78,8 @@ import PosthogTrackers from "../../../PosthogTrackers";
 import TileErrorBoundary from '../messages/TileErrorBoundary';
 import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
 import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
+import { ReadReceiptGroup } from './ReadReceiptGroup';
+import { useTooltip } from "../../../utils/useTooltip";
 
 export type GetRelationsForEvent = (eventId: string, relationType: string, eventType: string) => Relations;
 
@@ -221,9 +222,6 @@ interface IProps {
 interface IState {
     // Whether the action bar is focused.
     actionBarFocused: boolean;
-    // Whether all read receipts are being displayed. If not, only display
-    // a truncation of them.
-    allReadAvatars: boolean;
     // Whether the event's sender has been verified.
     verified: string;
     // Whether onRequestKeysClick has been called since mounting.
@@ -273,9 +271,6 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         this.state = {
             // Whether the action bar is focused.
             actionBarFocused: false,
-            // Whether all read receipts are being displayed. If not, only display
-            // a truncation of them.
-            allReadAvatars: false,
             // Whether the event's sender has been verified.
             verified: null,
             // Whether onRequestKeysClick has been called since mounting.
@@ -731,108 +726,6 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         return actions.tweaks.highlight;
     }
 
-    private toggleAllReadAvatars = () => {
-        this.setState({
-            allReadAvatars: !this.state.allReadAvatars,
-        });
-    };
-
-    private getReadAvatars() {
-        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
-            return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
-        }
-
-        const MAX_READ_AVATARS = this.props.layout == Layout.Bubble
-            ? 2
-            : 5;
-
-        // return early if there are no read receipts
-        if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
-            // We currently must include `mx_EventTile_readAvatars` in the DOM
-            // of all events, as it is the positioned parent of the animated
-            // read receipts. We can't let it unmount when a receipt moves
-            // events, so for now we mount it for all events. Without it, the
-            // animation will start from the top of the timeline (because it
-            // lost its container).
-            // See also https://github.com/vector-im/element-web/issues/17561
-            return (
-                <div className="mx_EventTile_msgOption">
-                    <span className="mx_EventTile_readAvatars" />
-                </div>
-            );
-        }
-
-        const avatars = [];
-        const receiptOffset = 15;
-        let left = 0;
-
-        const receipts = this.props.readReceipts;
-
-        for (let i = 0; i < receipts.length; ++i) {
-            const receipt = receipts[i];
-
-            let hidden = true;
-            if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
-                hidden = false;
-            }
-            // TODO: we keep the extra read avatars in the dom to make animation simpler
-            // we could optimise this to reduce the dom size.
-
-            // If hidden, set offset equal to the offset of the final visible avatar or
-            // else set it proportional to index
-            left = (hidden ? MAX_READ_AVATARS - 1 : i) * -receiptOffset;
-
-            const userId = receipt.userId;
-            let readReceiptInfo: IReadReceiptInfo;
-
-            if (this.props.readReceiptMap) {
-                readReceiptInfo = this.props.readReceiptMap[userId];
-                if (!readReceiptInfo) {
-                    readReceiptInfo = {};
-                    this.props.readReceiptMap[userId] = readReceiptInfo;
-                }
-            }
-
-            // add to the start so the most recent is on the end (ie. ends up rightmost)
-            avatars.unshift(
-                <ReadReceiptMarker
-                    key={userId}
-                    member={receipt.roomMember}
-                    fallbackUserId={userId}
-                    leftOffset={left}
-                    hidden={hidden}
-                    readReceiptInfo={readReceiptInfo}
-                    checkUnmounting={this.props.checkUnmounting}
-                    suppressAnimation={this.suppressReadReceiptAnimation}
-                    onClick={this.toggleAllReadAvatars}
-                    timestamp={receipt.ts}
-                    showTwelveHour={this.props.isTwelveHour}
-                />,
-            );
-        }
-
-        let remText: JSX.Element;
-        if (!this.state.allReadAvatars) {
-            const remainder = receipts.length - MAX_READ_AVATARS;
-            if (remainder > 0) {
-                remText = <span className="mx_EventTile_readAvatarRemainder"
-                    onClick={this.toggleAllReadAvatars}
-                    style={{ right: "calc(" + toRem(-left) + " + " + receiptOffset + "px)" }}
-                    aria-live="off">{ remainder }+
-                </span>;
-            }
-        }
-
-        return (
-            <div className="mx_EventTile_msgOption">
-                <span className="mx_EventTile_readAvatars">
-                    { remText }
-                    { avatars }
-                </span>
-            </div>
-        );
-    }
-
     private onSenderProfileClick = () => {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
@@ -1308,8 +1201,17 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
 
         let msgOption;
         if (this.props.showReadReceipts) {
-            const readAvatars = this.getReadAvatars();
+            if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
-            msgOption = readAvatars;
+                msgOption = <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
+            } else {
+                msgOption = <ReadReceiptGroup
+                    readReceipts={this.props.readReceipts ?? []}
+                    readReceiptMap={this.props.readReceiptMap ?? {}}
+                    checkUnmounting={this.props.checkUnmounting}
+                    suppressAnimation={this.suppressReadReceiptAnimation}
+                    isTwelveHour={this.props.isTwelveHour}
+                />;
+            }
         }
 
         let replyChain;
@@ -1674,30 +1576,9 @@ interface ISentReceiptProps {
     messageState: string; // TODO: Types for message sending state
 }
 
-interface ISentReceiptState {
+function SentReceipt({ messageState }: ISentReceiptProps) {
-    hover: boolean;
+    const isSent = !messageState || messageState === 'sent';
-}
+    const isFailed = messageState === 'not_sent';
-
-class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptState> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            hover: false,
-        };
-    }
-
-    onHoverStart = () => {
-        this.setState({ hover: true });
-    };
-
-    onHoverEnd = () => {
-        this.setState({ hover: false });
-    };
-
-    render() {
-        const isSent = !this.props.messageState || this.props.messageState === 'sent';
-        const isFailed = this.props.messageState === 'not_sent';
     const receiptClasses = classNames({
         'mx_EventTile_receiptSent': isSent,
         'mx_EventTile_receiptSending': !isSent && !isFailed,
@@ -1705,35 +1586,41 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
 
     let nonCssBadge = null;
     if (isFailed) {
-            nonCssBadge = <NotificationBadge
+        nonCssBadge = (
-                notification={StaticNotificationState.RED_EXCLAMATION}
+            <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />
-            />;
+        );
     }
 
-        let tooltip = null;
-        if (this.state.hover) {
     let label = _t("Sending your message...");
-            if (this.props.messageState === 'encrypting') {
+    if (messageState === 'encrypting') {
         label = _t("Encrypting your message...");
     } else if (isSent) {
         label = _t("Your message was sent");
     } else if (isFailed) {
         label = _t("Failed to send");
     }
-            // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
+    const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
-            // with the read receipt.
+        label: label,
-            tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={3} />;
+        alignment: Alignment.TopRight,
-        }
+    });
 
     return (
         <div className="mx_EventTile_msgOption">
-                <span className="mx_EventTile_readAvatars">
+            <div className="mx_ReadReceiptGroup">
-                    <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+                <div
+                    className="mx_ReadReceiptGroup_button"
+                    onMouseOver={showTooltip}
+                    onMouseLeave={hideTooltip}
+                    onFocus={showTooltip}
+                    onBlur={hideTooltip}>
+                    <span className="mx_ReadReceiptGroup_container">
+                        <span className={receiptClasses}>
                             { nonCssBadge }
-                        { tooltip }
                         </span>
                     </span>
                 </div>
+                { tooltip }
+            </div>
+        </div>
     );
 }
-}

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -0,0 +1,254 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { PropsWithChildren, useRef } from "react";
+
+import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
+import { IReadReceiptProps } from "./EventTile";
+import AccessibleButton from "../elements/AccessibleButton";
+import MemberAvatar from "../avatars/MemberAvatar";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import { Alignment } from "../elements/Tooltip";
+import { formatDate } from "../../../DateUtils";
+import { Action } from "../../../dispatcher/actions";
+import dis from "../../../dispatcher/dispatcher";
+import ContextMenu, { aboveLeftOf, MenuItem, useContextMenu } from "../../structures/ContextMenu";
+import { useTooltip } from "../../../utils/useTooltip";
+import { _t } from "../../../languageHandler";
+import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
+
+const MAX_READ_AVATARS = 3;
+const READ_AVATAR_OFFSET = 10;
+export const READ_AVATAR_SIZE = 16;
+
+interface Props {
+    readReceipts: IReadReceiptProps[];
+    readReceiptMap: { [userId: string]: IReadReceiptInfo };
+    checkUnmounting: () => boolean;
+    suppressAnimation: boolean;
+    isTwelveHour: boolean;
+}
+
+// Design specified that we should show the three latest read receipts
+function determineAvatarPosition(index, count): [boolean, number] {
+    const firstVisible = Math.max(0, count - MAX_READ_AVATARS);
+
+    if (index >= firstVisible) {
+        return [false, index - firstVisible];
+    } else {
+        return [true, 0];
+    }
+}
+
+export function ReadReceiptGroup(
+    { readReceipts, readReceiptMap, checkUnmounting, suppressAnimation, isTwelveHour }: Props,
+) {
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+    const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
+        label: _t("Seen by %(count)s people", { count: readReceipts.length }),
+        alignment: Alignment.TopRight,
+    });
+
+    // return early if there are no read receipts
+    if (readReceipts.length === 0) {
+        // We currently must include `mx_ReadReceiptGroup_container` in
+        // the DOM of all events, as it is the positioned parent of the
+        // animated read receipts. We can't let it unmount when a receipt
+        // moves events, so for now we mount it for all events. Without
+        // it, the animation will start from the top of the timeline
+        // (because it lost its container).
+        // See also https://github.com/vector-im/element-web/issues/17561
+        return (
+            <div className="mx_EventTile_msgOption">
+                <div className="mx_ReadReceiptGroup">
+                    <div className="mx_ReadReceiptGroup_button">
+                        <span className="mx_ReadReceiptGroup_container" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    const avatars = readReceipts.map((receipt, index) => {
+        const [hidden, position] = determineAvatarPosition(index, readReceipts.length);
+
+        const userId = receipt.userId;
+        let readReceiptInfo: IReadReceiptInfo;
+
+        if (readReceiptMap) {
+            readReceiptInfo = readReceiptMap[userId];
+            if (!readReceiptInfo) {
+                readReceiptInfo = {};
+                readReceiptMap[userId] = readReceiptInfo;
+            }
+        }
+
+        return (
+            <ReadReceiptMarker
+                key={userId}
+                member={receipt.roomMember}
+                fallbackUserId={userId}
+                offset={position * READ_AVATAR_OFFSET}
+                hidden={hidden}
+                readReceiptInfo={readReceiptInfo}
+                checkUnmounting={checkUnmounting}
+                suppressAnimation={suppressAnimation}
+                timestamp={receipt.ts}
+                showTwelveHour={isTwelveHour}
+            />
+        );
+    });
+
+    let remText: JSX.Element;
+    const remainder = readReceipts.length - MAX_READ_AVATARS;
+    if (remainder > 0) {
+        remText = (
+            <span className="mx_ReadReceiptGroup_remainder" aria-live="off">
+                +{ remainder }
+            </span>
+        );
+    }
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const buttonRect = button.current.getBoundingClientRect();
+        contextMenu = (
+            <ContextMenu
+                menuClassName="mx_ReadReceiptGroup_popup"
+                onFinished={closeMenu}
+                {...aboveLeftOf(buttonRect)}>
+                <AutoHideScrollbar>
+                    <SectionHeader className="mx_ReadReceiptGroup_title">
+                        { _t("Seen by %(count)s people", { count: readReceipts.length }) }
+                    </SectionHeader>
+                    { readReceipts.map(receipt => (
+                        <ReadReceiptPerson
+                            key={receipt.userId}
+                            {...receipt}
+                            isTwelveHour={isTwelveHour}
+                            onAfterClick={closeMenu}
+                        />
+                    )) }
+                </AutoHideScrollbar>
+            </ContextMenu>
+        );
+    }
+
+    return (
+        <div className="mx_EventTile_msgOption">
+            <div className="mx_ReadReceiptGroup">
+                <AccessibleButton
+                    className="mx_ReadReceiptGroup_button"
+                    inputRef={button}
+                    onClick={openMenu}
+                    onMouseOver={showTooltip}
+                    onMouseLeave={hideTooltip}
+                    onFocus={showTooltip}
+                    onBlur={hideTooltip}>
+                    { remText }
+                    <span
+                        className="mx_ReadReceiptGroup_container"
+                        style={{
+                            width: Math.min(MAX_READ_AVATARS, readReceipts.length) * READ_AVATAR_OFFSET +
+                                READ_AVATAR_SIZE - READ_AVATAR_OFFSET,
+                        }}
+                    >
+                        { avatars }
+                    </span>
+                </AccessibleButton>
+                { tooltip }
+                { contextMenu }
+            </div>
+        </div>
+    );
+}
+
+interface ReadReceiptPersonProps extends IReadReceiptProps {
+    isTwelveHour: boolean;
+    onAfterClick?: () => void;
+}
+
+function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick }: ReadReceiptPersonProps) {
+    const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
+        alignment: Alignment.TopCenter,
+        tooltipClassName: "mx_ReadReceiptGroup_person--tooltip",
+        label: (
+            <>
+                <div className="mx_Tooltip_title">
+                    { roomMember.name ?? userId }
+                </div>
+                <div className="mx_Tooltip_sub">
+                    { userId }
+                </div>
+            </>
+        ),
+    });
+
+    return (
+        <MenuItem
+            className="mx_ReadReceiptGroup_person"
+            onClick={() => {
+                dis.dispatch({
+                    action: Action.ViewUser,
+                    member: roomMember,
+                    push: false,
+                });
+                onAfterClick?.();
+            }}
+            onMouseOver={showTooltip}
+            onMouseLeave={hideTooltip}
+            onFocus={showTooltip}
+            onBlur={hideTooltip}
+            onWheel={hideTooltip}>
+            <MemberAvatar
+                member={roomMember}
+                fallbackUserId={userId}
+                width={24}
+                height={24}
+                aria-hidden="true"
+                aria-live="off"
+                resizeMethod="crop" />
+            <div className="mx_ReadReceiptGroup_name">
+                <p>{ roomMember.name }</p>
+                <p className="mx_ReadReceiptGroup_secondary">
+                    { formatDate(new Date(ts), isTwelveHour) }
+                </p>
+            </div>
+            { tooltip }
+        </MenuItem>
+    );
+}
+
+interface ISectionHeaderProps {
+    className?: string;
+}
+
+function SectionHeader({ className, children }: PropsWithChildren<ISectionHeaderProps>) {
+    const ref = useRef<HTMLHeadingElement>();
+    const [onFocus] = useRovingTabIndex(ref);
+
+    return (
+        <h3
+            className={className}
+            role="menuitem"
+            onFocus={onFocus}
+            tabIndex={-1}
+            ref={ref}
+        >
+            { children }
+        </h3>
+    );
+}

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -19,15 +19,13 @@ import React, { createRef, RefObject } from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { _t } from '../../../languageHandler';
-import { formatDate } from '../../../DateUtils';
 import NodeAnimator from "../../../NodeAnimator";
 import { toPx } from "../../../utils/units";
 import MemberAvatar from '../avatars/MemberAvatar';
 
 export interface IReadReceiptInfo {
     top?: number;
-    left?: number;
+    right?: number;
     parent?: Element;
 }
 
@@ -40,7 +38,7 @@ interface IProps {
 
     // number of pixels to offset the avatar from the right of its parent;
     // typically a negative value.
-    leftOffset?: number;
+    offset: number;
 
     // true to hide the avatar (it will still be animated)
     hidden?: boolean;
@@ -56,9 +54,6 @@ interface IProps {
     // are being unmounted.
     checkUnmounting?: () => boolean;
 
-    // callback for clicks on this RR
-    onClick?: (e: React.MouseEvent) => void;
-
     // Timestamp when the receipt was read
     timestamp?: number;
 
@@ -73,16 +68,12 @@ interface IState {
 
 interface IReadReceiptMarkerStyle {
     top: number;
-    left: number;
+    right: number;
 }
 
 export default class ReadReceiptMarker extends React.PureComponent<IProps, IState> {
     private avatar: React.RefObject<HTMLDivElement | HTMLImageElement | HTMLSpanElement> = createRef();
 
-    static defaultProps = {
-        leftOffset: 0,
-    };
-
     constructor(props: IProps) {
         super(props);
 
@@ -112,7 +103,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
 
         const avatarNode = this.avatar.current;
         rrInfo.top = avatarNode.offsetTop;
-        rrInfo.left = avatarNode.offsetLeft;
+        rrInfo.right = avatarNode.getBoundingClientRect().right - avatarNode.offsetParent.getBoundingClientRect().right;
         rrInfo.parent = avatarNode.offsetParent;
     }
 
@@ -125,9 +116,9 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
     }
 
     public componentDidUpdate(prevProps: IProps): void {
-        const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset;
+        const differentOffset = prevProps.offset !== this.props.offset;
         const visibilityChanged = prevProps.hidden !== this.props.hidden;
-        if (differentLeftOffset || visibilityChanged) {
+        if (differentOffset || visibilityChanged) {
             this.animateMarker();
         }
     }
@@ -157,13 +148,13 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
 
         const startStyles = [];
 
-        if (oldInfo && oldInfo.left) {
+        if (oldInfo && oldInfo.right) {
             // start at the old height and in the old h pos
             startStyles.push({ top: startTopOffset+"px",
-                left: toPx(oldInfo.left) });
+                right: toPx(oldInfo.right) });
         }
 
-        startStyles.push({ top: startTopOffset+'px', left: '0' });
+        startStyles.push({ top: startTopOffset+'px', right: '0' });
 
         this.setState({
             suppressDisplay: false,
@@ -177,29 +168,10 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
         }
 
         const style = {
-            left: toPx(this.props.leftOffset),
+            right: toPx(this.props.offset),
             top: '0px',
         };
 
-        let title;
-        if (this.props.timestamp) {
-            const dateString = formatDate(new Date(this.props.timestamp), this.props.showTwelveHour);
-            if (!this.props.member || this.props.fallbackUserId === this.props.member.rawDisplayName) {
-                title = _t(
-                    "Seen by %(userName)s at %(dateTime)s",
-                    { userName: this.props.fallbackUserId,
-                        dateTime: dateString },
-                );
-            } else {
-                title = _t(
-                    "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
-                    { displayName: this.props.member.rawDisplayName,
-                        userName: this.props.fallbackUserId,
-                        dateTime: dateString },
-                );
-            }
-        }
-
         return (
             <NodeAnimator startStyles={this.state.startStyles}>
                 <MemberAvatar
@@ -211,9 +183,9 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
                     height={14}
                     resizeMethod="crop"
                     style={style}
-                    title={title}
-                    onClick={this.props.onClick}
                     inputRef={this.avatar as RefObject<HTMLImageElement>}
+                    hideTitle
+                    tabIndex={-1}
                 />
             </NodeAnimator>
         );

src/i18n/strings/en_EN.json

@@ -1763,8 +1763,8 @@
     "Preview": "Preview",
     "View": "View",
     "Join": "Join",
-    "Seen by %(userName)s at %(dateTime)s": "Seen by %(userName)s at %(dateTime)s",
+    "Seen by %(count)s people|other": "Seen by %(count)s people",
-    "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
+    "Seen by %(count)s people|one": "Seen by %(count)s person",
     "Recently viewed": "Recently viewed",
     "Replying": "Replying",
     "Room %(name)s": "Room %(name)s",

src/utils/useTooltip.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentProps, useState } from "react";
+
+import Tooltip from "../components/views/elements/Tooltip";
+
+interface TooltipEvents {
+    showTooltip: () => void;
+    hideTooltip: () => void;
+}
+
+export function useTooltip(props: ComponentProps<typeof Tooltip>): [TooltipEvents, JSX.Element | null] {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const showTooltip = () => setIsVisible(true);
+    const hideTooltip = () => setIsVisible(false);
+
+    // No need to fill up the DOM with hidden tooltip elements. Only add the
+    // tooltip when we're hovering over the item (performance)
+    const tooltip = <Tooltip
+        {...props}
+        visible={isVisible}
+    />;
+
+    return [{ showTooltip, hideTooltip }, tooltip];
+}