Mute avatars and read receipts on event tiles

This reduces overall noise from the screen reader. It was reading the alt attribute from the sender avatar, which was just a mxid. The read receipts were just nonsensical noise.

Fixes https://github.com/vector-im/riot-web/issues/2716
Fixes https://github.com/vector-im/riot-web/issues/5697
See https://github.com/vector-im/riot-web/issues/9747

src/components/views/elements/AccessibleButton.js

@@ -67,8 +67,8 @@ export default function AccessibleButton(props) {
     restProps.ref = restProps.inputRef;
     delete restProps.inputRef;
 
-    restProps.tabIndex = restProps.tabIndex || "0";
-    restProps.role = "button";
+    restProps.tabIndex = restProps.tabIndex === undefined ? "0" : restProps.tabIndex;
+    restProps.role = restProps.role === undefined ? "button" : restProps.role;
     restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
 

src/components/views/rooms/EventTile.js

@@ -541,6 +541,8 @@ module.exports = withMatrixClient(React.createClass({
         const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
         const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
 
+        const muteScreenReader = isSending || !this.props.eventSendStatus;
+
         const classes = classNames({
             mx_EventTile: true,
             mx_EventTile_isEditing: this.props.isEditing,
@@ -597,9 +599,13 @@ module.exports = withMatrixClient(React.createClass({
         if (this.props.mxEvent.sender && avatarSize) {
             avatar = (
                     <div className="mx_EventTile_avatar">
-                        <MemberAvatar member={this.props.mxEvent.sender}
+                        <MemberAvatar
+                            member={this.props.mxEvent.sender}
                             width={avatarSize} height={avatarSize}
                             viewUserOnClick={true}
+                            aria-hidden={true} /* silence screen readers */
+                            buttonRole={null} /* trick screen readers into thinking this is not a button */
+                            tabIndex={null} /* trick screen readers into thinking this is not a button */
                         />
                     </div>
             );
@@ -769,7 +775,7 @@ module.exports = withMatrixClient(React.createClass({
                     'replyThread',
                 );
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-hidden={muteScreenReader}>
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
                         </div>
@@ -793,7 +799,7 @@ module.exports = withMatrixClient(React.createClass({
                             { actionBar }
                         </div>
                         {
-                            // The avatar goes after the event tile as it's absolutly positioned to be over the
+                            // The avatar goes after the event tile as it's absolutely positioned to be over the
                             // event tile line, so needs to be later in the DOM so it appears on top (this avoids
                             // the need for further z-indexing chaos)
                         }

src/components/views/rooms/ReadReceiptMarker.js

@@ -211,11 +211,13 @@ module.exports = React.createClass({
                 <MemberAvatar
                     member={this.props.member}
                     fallbackUserId={this.props.fallbackUserId}
-                    aria-hidden="true"
                     width={14} height={14} resizeMethod="crop"
                     style={style}
                     title={title}
                     onClick={this.props.onClick}
+                    aria-hidden={true} /* silence screen readers */
+                    buttonRole={null} /* trick screen readers into thinking this is not a button */
+                    tabIndex={null} /* trick screen readers into thinking this is not a button */
                 />
             </Velociraptor>
         );