Merge pull request #3017 from matrix-org/revert-3007-travis/sr/mute-timeline

Revert "Make the timeline less noisy for screen readers"

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 === undefined ? "0" : restProps.tabIndex;
-    restProps.role = restProps.role === undefined ? "button" : restProps.role;
+    restProps.tabIndex = restProps.tabIndex || "0";
+    restProps.role = "button";
     restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
 

src/components/views/elements/Flair.js

@@ -45,18 +45,12 @@ 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}
-            aria-hidden={true}
-        />;
+            title={tooltip} />;
     }
 }
 

src/components/views/messages/MessageTimestamp.js

@@ -23,17 +23,12 @@ 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)}
-                aria-hidden={this.props.ariaHidden}
-            >
+            <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
                 { formatTime(date, this.props.showTwelveHour) }
             </span>
         );

src/components/views/rooms/EventTile.js

@@ -545,8 +545,6 @@ 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,
@@ -603,13 +601,9 @@ 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>
             );
@@ -640,12 +634,8 @@ 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()}
-                ariaHidden={muteScreenReader}
-            /> : null;
+        const timestamp = this.props.mxEvent.getTs() ?
+            <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
         const keyRequestHelpText =
             <div className="mx_EventTile_keyRequestInfo_tooltip_contents">
@@ -783,13 +773,13 @@ module.exports = withMatrixClient(React.createClass({
                     'replyThread',
                 );
                 return (
-                    <div className={classes} aria-hidden={muteScreenReader}>
+                    <div className={classes}>
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
                         </div>
                         { sender }
                         <div className="mx_EventTile_line">
-                            <a href={permalink} onClick={this.onPermalinkClicked} aria-hidden={muteScreenReader}>
+                            <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { timestamp }
                             </a>
                             { this._renderE2EPadlock() }
@@ -807,7 +797,7 @@ module.exports = withMatrixClient(React.createClass({
                             { actionBar }
                         </div>
                         {
-                            // The avatar goes after the event tile as it's absolutely positioned to be over the
+                            // The avatar goes after the event tile as it's absolutly 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,13 +211,11 @@ 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>
         );