Change aria-label to aria-labelledby, make listitem tab-able, override the profile picture alt text

Author: akirk

src/components/views/avatars/MemberAvatar.tsx

@@ -86,6 +86,7 @@ function MemberAvatar(
     return (
         <BaseAvatar
             {...props}
+            tabindex="-1"
             size={size}
             name={name ?? ""}
             title={hideTitle ? undefined : title}
@@ -102,6 +103,7 @@ function MemberAvatar(
                       }
                     : props.onClick
             }
+            aria-label={name ? name + ". " : ""}
             altText={_t("common|user_avatar")}
             ref={ref}
         />

src/components/views/messages/TextualBody.tsx

@@ -623,6 +623,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
 
         let widgets;
+        const id = 'mx_EventTile_content_' + mxEvent.getId();
         if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) {
             widgets = (
                 <LinkPreviewGroup
@@ -636,7 +637,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
         if (isEmote) {
             return (
-                <div className="mx_MEmoteBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
+                <div className="mx_MEmoteBody mx_EventTile_content" id={id} onClick={this.onBodyLinkClick}>
                     *&nbsp;
                     <span className="mx_MEmoteBody_sender" onClick={this.onEmoteSenderClick}>
                         {mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()}
@@ -649,14 +650,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
         if (isNotice) {
             return (
-                <div className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
+                <div className="mx_MNoticeBody mx_EventTile_content" id={id} onClick={this.onBodyLinkClick}>
                     {body}
                     {widgets}
                 </div>
             );
         }
         return (
-            <div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
+            <div className="mx_MTextBody mx_EventTile_content" id={id} onClick={this.onBodyLinkClick}>
                 {body}
                 {widgets}
             </div>

src/components/views/rooms/EventTile.tsx

@@ -1061,7 +1061,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                     this.context.timelineRenderingType,
                 );
             avatar = (
-                <div className="mx_EventTile_avatar">
+                <div className="mx_EventTile_avatar" id={'mx_EventTile_avatar_'+this.props.mxEvent.getId()} tabindex="-1">
                     <MemberAvatar
                         member={member}
                         size={avatarSize}
@@ -1147,6 +1147,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             <a
                 href={permalink}
                 onClick={this.onPermalinkClicked}
+                tabindex="-1"
                 aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
                 onContextMenu={this.onTimestampContextMenu}
             >
@@ -1209,8 +1210,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                     {
                         "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<EventTileProps, IState>
                     {
                         "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<EventTileProps, IState>
                     {
                         "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<EventTileProps, IState>
                         {sender}
                         {ircPadlock}
                         {avatar}
-                        <div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
+                        <div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu} aria-labelledby={'mx_EventTile_content_' + this.props.mxEvent.getId()}>
                             {this.renderContextMenu()}
                             {groupTimestamp}
                             {groupPadlock}