Implements functions that return id

src/components/views/messages/TextualBody.tsx

@@ -47,6 +47,7 @@ import { getParentEventId } from "../../../utils/Reply";
 import { EditWysiwygComposer } from "../rooms/wysiwyg_composer";
 import { IEventTileOps } from "../rooms/EventTile";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { getIdForBody } from "./shared/getIdForBody";
 
 const MAX_HIGHLIGHT_LENGTH = 4096;
 
@@ -612,7 +613,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
 
         let widgets;
-        const id = "mx_EventTile_content_" + mxEvent.getId();
+        const id = getIdForBody(mxEvent);
         if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) {
             widgets = (
                 <LinkPreviewGroup

src/components/views/messages/shared/getIdForBody.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2024 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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+/**
+ * Generate a html element id from this event
+ * @param mxEvent Event from which the id is derived
+ * @returns id to give the element
+ */
+export function getIdForBody(mxEvent: MatrixEvent): string {
+    return `mx_EventTile_content_${mxEvent.getTxnId() ?? mxEvent.getId()}`;
+}

src/components/views/rooms/EventTile.tsx

@@ -85,6 +85,7 @@ import { ElementCall } from "../../../models/Call";
 import { UnreadNotificationBadge } from "./NotificationBadge/UnreadNotificationBadge";
 import { EventTileThreadToolbar } from "./EventTile/EventTileThreadToolbar";
 import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
+import { getIdForBody } from "../messages/shared/getIdForBody";
 
 export type GetRelationsForEvent = (
     eventId: string,
@@ -281,6 +282,15 @@ export function isEligibleForSpecialReceipt(event: MatrixEvent): boolean {
     return true;
 }
 
+/**
+ * Get an id for the avatar div
+ * @param event Event from which id is derived
+ * @returns The id that was created
+ */
+function getIdForAvatar(event: MatrixEvent): string {
+    return `mx_EventTile_avatar_${event.getTxnId() ?? event.getId()}`;
+}
+
 // MUST be rendered within a RoomContext with a set timelineRenderingType
 export class UnwrappedEventTile extends React.Component<EventTileProps, IState> {
     private suppressReadReceiptAnimation: boolean;
@@ -1061,11 +1071,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                     this.context.timelineRenderingType,
                 );
             avatar = (
-                <div
-                    className="mx_EventTile_avatar"
-                    id={"mx_EventTile_avatar_" + this.props.mxEvent.getId()}
-                    tabIndex={-1}
-                >
+                <div className="mx_EventTile_avatar" id={getIdForAvatar(this.props.mxEvent)} tabIndex={-1}>
                     <MemberAvatar
                         member={member}
                         size={avatarSize}
@@ -1215,7 +1221,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         "className": classes,
                         "tabIndex": 0,
                         "aria-live": ariaLive,
-                        "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`,
+                        "aria-labelledby": `${getIdForAvatar(this.props.mxEvent)} ${getIdForBody(this.props.mxEvent)}`,
                         "aria-atomic": true,
                         "data-scroll-tokens": scrollToken,
                         "data-has-reply": !!replyChain,
@@ -1271,7 +1277,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         "className": classes,
                         "tabindex": 0,
                         "aria-live": ariaLive,
-                        "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`,
+                        "aria-labelledby": `${getIdForAvatar(this.props.mxEvent)} ${getIdForBody(this.props.mxEvent)}`,
                         "aria-atomic": "true",
                         "data-scroll-tokens": scrollToken,
                         "data-layout": this.props.layout,
@@ -1406,7 +1412,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         "className": classes,
                         "tabindex": 0,
                         "aria-live": ariaLive,
-                        "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`,
+                        "aria-labelledby": `${getIdForAvatar(this.props.mxEvent)} ${getIdForBody(this.props.mxEvent)}`,
                         "aria-atomic": "true",
                         "data-scroll-tokens": scrollToken,
                         "data-layout": this.props.layout,