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}