Don't speak the outgoing message if it is in the Sending state.

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
matrix-org · Feb 14, 2020 · bf27546 · bf27546
1 parent e2b7be8
commit bf27546
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
@@ -660,6 +660,9 @@ export default createReactClass({
             mx_EventTile_redacted: isRedacted,
         });
 
+        // If the tile is in the Sending state, don't speak the message.
+        const suppressSpeech = (isSending) ? "off" : undefined;
+
         let permalink = "#";
         if (this.props.permalinkCreator) {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
@@ -778,7 +781,7 @@ export default createReactClass({
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={suppressSpeech}>
                         <div className="mx_EventTile_roomName">
                             <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
@@ -804,7 +807,7 @@ export default createReactClass({
             }
             case 'file_grid': {
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={suppressSpeech}>
                         <div className="mx_EventTile_line">
                             <EventTileType ref={this._tile}
                                            mxEvent={this.props.mxEvent}
@@ -840,7 +843,7 @@ export default createReactClass({
                     );
                 }
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={suppressSpeech}>
                         { avatar }
                         { sender }
                         <div className="mx_EventTile_reply">
@@ -868,7 +871,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={suppressSpeech}>
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
                         </div>