From 4bf8d18febf61163019f55d76c629abafcef65e2 Mon Sep 17 00:00:00 2001 From: Alex Kirk Date: Fri, 8 Mar 2024 21:40:46 +0800 Subject: [PATCH] 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}