From e30354b57f7d4688401540c01b8ec585b3d758f6 Mon Sep 17 00:00:00 2001 From: Alex Kirk Date: Fri, 1 Dec 2023 12:24:30 +0100 Subject: [PATCH 01/12] Override aria-label for whole tile --- src/components/views/rooms/EventTile.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index cb414173387..026f9aad618 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1210,6 +1210,7 @@ export class UnwrappedEventTile extends React.Component "ref": this.ref, "className": classes, "aria-live": ariaLive, + "aria-label": this.props.mxEvent.sender.name + '. ' + (this.props.mxEvent.clearEvent || this.props.mxEvent.event).content.body, "aria-atomic": true, "data-scroll-tokens": scrollToken, "data-has-reply": !!replyChain, @@ -1399,6 +1400,7 @@ export class UnwrappedEventTile extends React.Component "className": classes, "tabIndex": -1, "aria-live": ariaLive, + "aria-label": this.props.mxEvent.sender.name + '. ' + (this.props.mxEvent.clearEvent || this.props.mxEvent.event).content.body, "aria-atomic": "true", "data-scroll-tokens": scrollToken, "data-layout": this.props.layout, From 4bf8d18febf61163019f55d76c629abafcef65e2 Mon Sep 17 00:00:00 2001 From: Alex Kirk Date: Fri, 8 Mar 2024 21:40:46 +0800 Subject: [PATCH 02/12] Change aria-label to aria-labelledby, make listitem tab-able, override the profile picture alt text --- src/components/views/avatars/MemberAvatar.tsx | 2 ++ src/components/views/messages/TextualBody.tsx | 7 ++++--- src/components/views/rooms/EventTile.tsx | 15 +++++++++------ 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 15ff2f015c4..170042ec8c1 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -86,6 +86,7 @@ function MemberAvatar( return ( diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index cbb23f791d2..f1c7c652d98 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -623,6 +623,7 @@ export default class TextualBody extends React.Component { } let widgets; + const id = 'mx_EventTile_content_' + mxEvent.getId(); if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) { widgets = ( { if (isEmote) { return ( -
+
*  {mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()} @@ -649,14 +650,14 @@ export default class TextualBody extends React.Component { } if (isNotice) { return ( -
+
{body} {widgets}
); } return ( -
+
{body} {widgets}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 026f9aad618..51abb6ec62c 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1061,7 +1061,7 @@ export class UnwrappedEventTile extends React.Component this.context.timelineRenderingType, ); avatar = ( -
+
@@ -1209,8 +1210,9 @@ export class UnwrappedEventTile extends React.Component { "ref": this.ref, "className": classes, + "tabindex": 0, "aria-live": ariaLive, - "aria-label": this.props.mxEvent.sender.name + '. ' + (this.props.mxEvent.clearEvent || this.props.mxEvent.event).content.body, + "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`, "aria-atomic": true, "data-scroll-tokens": scrollToken, "data-has-reply": !!replyChain, @@ -1264,8 +1266,9 @@ export class UnwrappedEventTile extends React.Component { "ref": this.ref, "className": classes, - "tabIndex": -1, + "tabindex": 0, "aria-live": ariaLive, + "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`, "aria-atomic": "true", "data-scroll-tokens": scrollToken, "data-layout": this.props.layout, @@ -1398,9 +1401,9 @@ export class UnwrappedEventTile extends React.Component { "ref": this.ref, "className": classes, - "tabIndex": -1, + "tabindex": 0, "aria-live": ariaLive, - "aria-label": this.props.mxEvent.sender.name + '. ' + (this.props.mxEvent.clearEvent || this.props.mxEvent.event).content.body, + "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`, "aria-atomic": "true", "data-scroll-tokens": scrollToken, "data-layout": this.props.layout, @@ -1415,7 +1418,7 @@ export class UnwrappedEventTile extends React.Component {sender} {ircPadlock} {avatar} -
+
{this.renderContextMenu()} {groupTimestamp} {groupPadlock} From e10941c9ee2ee1c3c4bcfe59e5e53049bf42d975 Mon Sep 17 00:00:00 2001 From: Alex Kirk Date: Fri, 8 Mar 2024 22:28:48 +0800 Subject: [PATCH 03/12] Explain the dot --- src/components/views/avatars/MemberAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 170042ec8c1..5daf5cdcb31 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -103,7 +103,7 @@ function MemberAvatar( } : props.onClick } - aria-label={name ? name + ". " : ""} + aria-label={name ? name + ". " : ""} // Full stop adds a pause between the name and the appended message. altText={_t("common|user_avatar")} ref={ref} /> From 9ada3c96665e5df2304aec1b9870c54a17f00d13 Mon Sep 17 00:00:00 2001 From: Alex Kirk Date: Fri, 8 Mar 2024 23:07:42 +0800 Subject: [PATCH 04/12] Fix types --- src/components/views/avatars/MemberAvatar.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 5daf5cdcb31..51485473f82 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -86,7 +86,7 @@ function MemberAvatar( return ( this.context.timelineRenderingType, ); avatar = ( -
+
@@ -1210,7 +1210,7 @@ export class UnwrappedEventTile extends React.Component { "ref": this.ref, "className": classes, - "tabindex": 0, + "tabIndex": 0, "aria-live": ariaLive, "aria-labelledby": `mx_EventTile_avatar_${this.props.mxEvent.getId()} mx_EventTile_content_${this.props.mxEvent.getId()}`, "aria-atomic": true, From 18fa2d90ea443466ccb1e855533dca05e0ba7010 Mon Sep 17 00:00:00 2001 From: Alex Kirk Date: Fri, 8 Mar 2024 23:13:54 +0800 Subject: [PATCH 05/12] lint --- src/components/views/messages/TextualBody.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index f1c7c652d98..ba398fa4126 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -623,7 +623,7 @@ export default class TextualBody extends React.Component { } let widgets; - const id = 'mx_EventTile_content_' + mxEvent.getId(); + const id = "mx_EventTile_content_" + mxEvent.getId(); if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) { widgets = ( this.context.timelineRenderingType, ); avatar = ( -
+
{sender} {ircPadlock} {avatar} -
+
{this.renderContextMenu()} {groupTimestamp} {groupPadlock} From 637afa8eda987a1e23cbac1008e2f5ad3226ba21 Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Mon, 20 May 2024 16:15:06 +0530 Subject: [PATCH 06/12] Render a hidden colon --- res/css/views/rooms/_EventTile.pcss | 4 ++++ src/components/views/avatars/MemberAvatar.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index ad88a7c7863..e2448426258 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -39,6 +39,10 @@ $left-gutter: 64px; .mx_EventTile_avatar { cursor: pointer; user-select: none; + + .mx_EventTile_hiddenAvatarColon { + display: none; + } } .mx_EventTile_body { diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 51485473f82..7d7b0db3a28 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -103,7 +103,7 @@ function MemberAvatar( } : props.onClick } - aria-label={name ? name + ". " : ""} // Full stop adds a pause between the name and the appended message. + aria-label={name ?? ""} altText={_t("common|user_avatar")} ref={ref} /> diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 6822c71a5cd..695c0484f54 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1072,6 +1072,11 @@ export class UnwrappedEventTile extends React.Component viewUserOnClick={viewUserOnClick} forceHistorical={this.props.mxEvent.getType() === EventType.RoomMember} /> + {/** + * The li elements rendered below include the div above in its aria-labelledby. + * We render a hidden colon here so that screen readers will read out: `name : message` instead of `name message`. + */} + :
); } From bb308ebb782a441f99bc3bedf7374b1246b2dd8e Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Mon, 20 May 2024 16:31:58 +0530 Subject: [PATCH 07/12] Update snapshots --- .../__snapshots__/MessagePanel-test.tsx.snap | 2 ++ .../__snapshots__/BeaconMarker-test.tsx.snap | 2 ++ .../BeaconViewDialog-test.tsx.snap | 2 ++ .../__snapshots__/DialogSidebar-test.tsx.snap | 2 ++ .../ConfirmUserActionDialog-test.tsx.snap | 2 ++ .../__snapshots__/FacePile-test.tsx.snap | 2 ++ .../elements/__snapshots__/Pill-test.tsx.snap | 6 ++++++ .../__snapshots__/RoomFacePile-test.tsx.snap | 2 ++ .../views/messages/TextualBody-test.tsx | 4 +--- .../__snapshots__/MLocationBody-test.tsx.snap | 2 ++ .../__snapshots__/TextualBody-test.tsx.snap | 17 +++++++++++++---- .../__snapshots__/UserInfo-test.tsx.snap | 3 ++- .../__snapshots__/MemberTile-test.tsx.snap | 6 ++++++ .../__snapshots__/PinnedEventTile-test.tsx.snap | 3 +++ .../PeopleRoomSettingsTab-test.tsx.snap | 6 +++++- .../__snapshots__/HTMLExport-test.ts.snap | 2 +- 16 files changed, 53 insertions(+), 10 deletions(-) diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap index e57c5363af7..267a5cdacf6 100644 --- a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap @@ -94,12 +94,14 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = ` class="mx_GenericEventListSummary_avatars" > u diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap index bb916b85f3c..be196e13872 100644 --- a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap @@ -11,12 +11,14 @@ exports[` renders marker when beacon has location 1`] = ` class="mx_Marker_border" > a diff --git a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap index a87001baae6..b53aa720e82 100644 --- a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap @@ -32,12 +32,14 @@ exports[` renders own beacon status when user is live sharin class="mx_DialogOwnBeaconStatus" > a diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index bd6f9656ff0..9a05b08a29f 100644 --- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -32,12 +32,14 @@ exports[` renders sidebar correctly with beacons 1`] = ` class="mx_BeaconListItem" > diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap index 83c9fedbfc1..78219caa662 100644 --- a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap @@ -41,12 +41,14 @@ exports[`ConfirmUserActionDialog renders 1`] = ` class="mx_ConfirmUserActionDialog_avatar" > u diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap index f7d800eb19e..c28f2b920c9 100644 --- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap @@ -11,12 +11,14 @@ exports[` renders with a tooltip 1`] = ` class="_stacked-avatars_mcap2_111" > 4 diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap index 3202e046553..1602b083a3b 100644 --- a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap @@ -71,12 +71,14 @@ exports[` should render the expected pill for a known user not in the room > @@ -131,12 +133,14 @@ exports[` should render the expected pill for a message in the same room 1 > @@ -273,12 +277,14 @@ exports[` when rendering a pill for a user in the room should render as ex > diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap index ef901cd0cce..0321c7003e4 100644 --- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap @@ -11,12 +11,14 @@ exports[` renders 1`] = ` class="_stacked-avatars_mcap2_111" > b diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index fc7fe5511c5..ddf37f67979 100644 --- a/test/components/views/messages/TextualBody-test.tsx +++ b/test/components/views/messages/TextualBody-test.tsx @@ -197,9 +197,7 @@ describe("", () => { const ev = mkRoomTextMessage("Chat with https://matrix.to/#/@user:example.com"); const { container } = getComponent({ mxEvent: ev }); const content = container.querySelector(".mx_EventTile_body"); - expect(content.innerHTML).toMatchInlineSnapshot( - `"Chat with Member"`, - ); + expect(content.innerHTML).toMatchInlineSnapshot(`"Chat with Member"`); }); it("should not pillify room aliases", () => { diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap index c91ed6c6d85..317699dc5af 100644 --- a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap @@ -83,12 +83,14 @@ exports[`MLocationBody without error renders marker correctly fo class="mx_Marker_border" > u diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index 96bb641f9bf..835eee48985 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -55,16 +55,18 @@ exports[` renders formatted m.text correctly pills appear for an >
-
  • @user49:example.com
    :
    Message #49
  • @user48:example.com
    :
    Message #48
  • @user47:example.com
    :
    Message #47
  • @user46:example.com
    :
    Message #46
  • @user45:example.com
    :
    Message #45
  • @user44:example.com
    :
    Message #44
  • @user43:example.com
    :
    Message #43
  • @user42:example.com
    :
    Message #42
  • @user41:example.com
    :
    Message #41
  • @user40:example.com
    :
    Message #40
  • @user39:example.com
    :
    Message #39
  • @user38:example.com
    :
    Message #38
  • @user37:example.com
    :
    Message #37
  • @user36:example.com
    :
    Message #36
  • @user35:example.com
    :
    Message #35
  • @user34:example.com
    :
    Message #34
  • @user33:example.com
    :
    Message #33
  • @user32:example.com
    :
    Message #32
  • @user31:example.com
    :
    Message #31
  • @user30:example.com
    :
    Message #30
  • @user29:example.com
    :
    Message #29
  • @user28:example.com
    :
    Message #28
  • @user27:example.com
    :
    Message #27
  • @user26:example.com
    :
    Message #26
  • @user25:example.com
    :
    Message #25
  • @user24:example.com
    :
    Message #24
  • @user23:example.com
    :
    Message #23
  • @user22:example.com
    :
    Message #22
  • @user21:example.com
    :
    Message #21
  • @user20:example.com
    :
    Message #20
  • @user19:example.com
    :
    Message #19
  • @user18:example.com
    :
    Message #18
  • @user17:example.com
    :
    Message #17
  • @user16:example.com
    :
    Message #16
  • @user15:example.com
    :
    Message #15
  • @user14:example.com
    :
    Message #14
  • @user13:example.com
    :
    Message #13
  • @user12:example.com
    :
    Message #12
  • @user11:example.com
    :
    Message #11
  • @user10:example.com
    :
    Message #10
  • @user9:example.com
    :
    Message #9
  • @user8:example.com
    :
    Message #8
  • @user7:example.com
    :
    Message #7
  • @user6:example.com
    :
    Message #6
  • @user5:example.com
    :
    Message #5
  • @user4:example.com
    :
    Message #4
  • @user3:example.com
    :
    Message #3
  • @user2:example.com
    :
    Message #2
  • @user1:example.com
    :
    Message #1
  • @user0:example.com
    :
    Message #0
    • +
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
    • From c4c6805733c54b82f108fc853beddde134b6a34c Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Tue, 21 May 2024 09:20:20 +0530 Subject: [PATCH 12/12] Implements functions that return id --- src/components/views/messages/TextualBody.tsx | 3 ++- .../views/messages/shared/getIdForBody.ts | 26 +++++++++++++++++++ src/components/views/rooms/EventTile.tsx | 22 ++++++++++------ 3 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 src/components/views/messages/shared/getIdForBody.ts diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 78e980ab1fc..41c26e7b760 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/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 { } 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 = ( { private suppressReadReceiptAnimation: boolean; @@ -1061,11 +1071,7 @@ export class UnwrappedEventTile extends React.Component this.context.timelineRenderingType, ); avatar = ( -
    +
    "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 "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 "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,