Merge pull request #4075 from MarcoZehe/SuppressSpeechWhenSending

Don't speak the outgoing message if it is in the Sending state.
matrix-org · Jul 28, 2020 · 79348b4 · 79348b4
2 parents 2d918a6 + c1d2e27
commit 79348b4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
@@ -346,9 +346,9 @@ export default class MessagePanel extends React.Component {
         }
     }
 
-    _isUnmounting() {
+    _isUnmounting = () => {
         return !this._isMounted;
-    }
+    };
 
     // TODO: Implement granular (per-room) hide options
     _shouldShowEvent(mxEv) {
@@ -571,12 +571,10 @@ export default class MessagePanel extends React.Component {
 
         const readReceipts = this._readReceiptsByEvent[eventId];
 
-        // Dev note: `this._isUnmounting.bind(this)` is important - it ensures that
-        // the function is run in the context of this class and not EventTile, therefore
-        // ensuring the right `this._mounted` variable is used by read receipts (which
-        // don't update their position if we, the MessagePanel, is unmounting).
+        // use txnId as key if available so that we don't remount during sending
         ret.push(
-            <li key={eventId}
+            <li
+                key={mxEv.getTxnId() || eventId}
                 ref={this._collectEventNode.bind(this, eventId)}
                 data-scroll-tokens={scrollToken}
             >
@@ -590,7 +588,7 @@ export default class MessagePanel extends React.Component {
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
                         showUrlPreview={this.props.showUrlPreview}
-                        checkUnmounting={this._isUnmounting.bind(this)}
+                        checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.getAssociatedStatus()}
                         tileShape={this.props.tileShape}
                         isTwelveHour={this.props.isTwelveHour}

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
@@ -685,6 +685,9 @@ export default createReactClass({
             mx_EventTile_emote: msgtype === 'm.emote',
         });
 
+        // If the tile is in the Sending state, don't speak the message.
+        const ariaLive = (this.props.eventSendStatus !== null) ? 'off' : undefined;
+
         let permalink = "#";
         if (this.props.permalinkCreator) {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
@@ -819,7 +822,7 @@ export default createReactClass({
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_roomName">
                             <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
@@ -845,7 +848,7 @@ export default createReactClass({
             }
             case 'file_grid': {
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_line">
                             <EventTileType ref={this._tile}
                                            mxEvent={this.props.mxEvent}
@@ -881,7 +884,7 @@ export default createReactClass({
                     );
                 }
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         { ircTimestamp }
                         { avatar }
                         { sender }
@@ -911,7 +914,7 @@ export default createReactClass({
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
-                    <div className={classes} tabIndex={-1}>
+                    <div className={classes} tabIndex={-1} aria-live={ariaLive} aria-atomic="true">
                         { ircTimestamp }
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }