Tune aria-live regions around clocks/timers (#7735)

Author: t3chguy

src/components/views/audio_messages/Clock.tsx

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { HTMLProps } from "react";
 
 import { formatSeconds } from "../../../DateUtils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-export interface IProps {
+export interface IProps extends Pick<HTMLProps<HTMLSpanElement>, "aria-live"> {
     seconds: number;
 }
 
@@ -40,6 +40,8 @@ export default class Clock extends React.Component<IProps> {
     }
 
     public render() {
-        return <span className='mx_Clock'>{ formatSeconds(this.props.seconds) }</span>;
+        return <span aria-live={this.props["aria-live"]} className='mx_Clock'>
+            { formatSeconds(this.props.seconds) }
+        </span>;
     }
 }

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -61,6 +61,6 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
     }
 
     public render() {
-        return <Clock seconds={this.state.seconds} />;
+        return <Clock seconds={this.state.seconds} aria-live="off" />;
     }
 }

src/components/views/audio_messages/PlaybackClock.tsx

@@ -76,6 +76,9 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
                 seconds = this.state.durationSeconds;
             }
         }
-        return <Clock seconds={seconds} />;
+        return <Clock
+            seconds={seconds}
+            aria-live={this.state.playbackPhase === PlaybackState.Playing ? "off" : undefined}
+        />;
     }
 }

src/components/views/messages/CallEvent.tsx

@@ -227,7 +227,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
         if (state === CallState.Connected) {
             return (
                 <div className="mx_CallEvent_content">
-                    <Clock seconds={this.state.length} />
+                    <Clock seconds={this.state.length} aria-live="off" />
                     { this.props.timestamp }
                 </div>
             );