From 5ae23fdb2713081229e73a13bc12ae1865d6e2fe Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 21 May 2019 18:52:27 -0600
Subject: [PATCH 1/3] Hide flair from screen readers

To have less noise when they run over the sender profile.

See https://github.com/vector-im/riot-web/issues/9747
---
 src/components/views/elements/Flair.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index aa629794bab..7d3d298804a 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -45,12 +45,18 @@ class FlairAvatar extends React.Component {
         const tooltip = this.props.groupProfile.name ?
             `${this.props.groupProfile.name} (${this.props.groupProfile.groupId})`:
             this.props.groupProfile.groupId;
+
+        // Note: we hide flair from screen readers but ideally we'd support
+        // reading something out on hover. There's no easy way to do this though,
+        // so instead we just hide it completely.
         return <img
             src={httpUrl}
             width="16"
             height="16"
             onClick={this.onClick}
-            title={tooltip} />;
+            title={tooltip}
+            aria-hidden={true}
+        />;
     }
 }
 

From 4779144b2edc15ea089694b47f7af983dc015370 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 21 May 2019 18:54:40 -0600
Subject: [PATCH 2/3] 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 |  4 ++--
 src/components/views/rooms/EventTile.js           | 12 +++++++++---
 src/components/views/rooms/ReadReceiptMarker.js   |  4 +++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
index 06c440c54e9..19150682f01 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/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";
 
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 4b5acf949e2..a7de309ce62 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/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)
                         }
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 2f7a599d95e..4025a368316 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/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>
         );

From 68c4ee9374bfc0d65b5a4bd7cf0c364d6eef35d4 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 21 May 2019 18:57:16 -0600
Subject: [PATCH 3/3] Mute timestamps for irrelevant updates

Other fix for https://github.com/vector-im/riot-web/issues/5697

See https://github.com/vector-im/riot-web/issues/9747
---
 src/components/views/messages/MessageTimestamp.js |  7 ++++++-
 src/components/views/rooms/EventTile.js           | 10 +++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index 0bbb3f631e3..5bfdc1bc263 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -23,12 +23,17 @@ export default class MessageTimestamp extends React.Component {
     static propTypes = {
         ts: PropTypes.number.isRequired,
         showTwelveHour: PropTypes.bool,
+        ariaHidden: PropTypes.bool,
     };
 
     render() {
         const date = new Date(this.props.ts);
         return (
-            <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
+            <span
+                className="mx_MessageTimestamp"
+                title={formatFullDate(date, this.props.showTwelveHour)}
+                aria-hidden={this.props.ariaHidden}
+            >
                 { formatTime(date, this.props.showTwelveHour) }
             </span>
         );
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index a7de309ce62..27b06038ce5 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -636,8 +636,12 @@ module.exports = withMatrixClient(React.createClass({
             onFocusChange={this.onActionBarFocusChange}
         /> : undefined;
 
-        const timestamp = this.props.mxEvent.getTs() ?
-            <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
+        const timestamp = this.props.mxEvent.getTs()
+            ? <MessageTimestamp
+                showTwelveHour={this.props.isTwelveHour}
+                ts={this.props.mxEvent.getTs()}
+                ariaHidden={muteScreenReader}
+            /> : null;
 
         const keyRequestHelpText =
             <div className="mx_EventTile_keyRequestInfo_tooltip_contents">
@@ -781,7 +785,7 @@ module.exports = withMatrixClient(React.createClass({
                         </div>
                         { sender }
                         <div className="mx_EventTile_line">
-                            <a href={permalink} onClick={this.onPermalinkClicked}>
+                            <a href={permalink} onClick={this.onPermalinkClicked} aria-hidden={muteScreenReader}>
                                 { timestamp }
                             </a>
                             { this._renderE2EPadlock() }