From b7a03544347e43fc93b19663904dd4ac6a455398 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Feb 2022 18:08:29 +0000
Subject: [PATCH] Tune aria-live regions around clocks/timers

---
 src/components/views/audio_messages/Clock.tsx             | 8 +++++---
 .../views/audio_messages/LiveRecordingClock.tsx           | 2 +-
 src/components/views/audio_messages/PlaybackClock.tsx     | 5 ++++-
 src/components/views/messages/CallEvent.tsx               | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/views/audio_messages/Clock.tsx b/src/components/views/audio_messages/Clock.tsx
index 488a5a293b1..13ffaa7d765 100644
--- a/src/components/views/audio_messages/Clock.tsx
+++ b/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>;
     }
 }
diff --git a/src/components/views/audio_messages/LiveRecordingClock.tsx b/src/components/views/audio_messages/LiveRecordingClock.tsx
index b9b582a03b1..aa88d999bed 100644
--- a/src/components/views/audio_messages/LiveRecordingClock.tsx
+++ b/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" />;
     }
 }
diff --git a/src/components/views/audio_messages/PlaybackClock.tsx b/src/components/views/audio_messages/PlaybackClock.tsx
index 48946eb21f5..c792d1c4837 100644
--- a/src/components/views/audio_messages/PlaybackClock.tsx
+++ b/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}
+        />;
     }
 }
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 662e2b2c31a..a46f0106173 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/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>
             );