From 1b6d753cfe71002024b5641b1e0a371458669466 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Thu, 8 Dec 2022 15:27:32 +0100
Subject: [PATCH] Add voice broadcast device selection tooltip (#9726)

---
 .../components/atoms/VoiceBroadcastHeader.tsx |  6 +++--
 .../molecules/VoiceBroadcastRecordingPip.tsx  |  8 +++---
 .../VoiceBroadcastHeader-test.tsx.snap        | 20 ++++++++++++---
 .../VoiceBroadcastPlaybackBody-test.tsx.snap  | 25 +++++++++++++++----
 ...oiceBroadcastPreRecordingPip-test.tsx.snap |  5 +++-
 .../VoiceBroadcastRecordingBody-test.tsx.snap | 10 ++++++--
 6 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
index 64640ca793..7984316459 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
@@ -26,6 +26,7 @@ import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.
 import Clock from "../../../components/views/audio_messages/Clock";
 import { formatTimeLeft } from "../../../DateUtils";
 import Spinner from "../../../components/views/elements/Spinner";
+import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
 
 interface VoiceBroadcastHeaderProps {
     live?: VoiceBroadcastLiveness;
@@ -87,13 +88,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
     });
 
     const microphoneLine = microphoneLabel && (
-        <div
+        <AccessibleTooltipButton
             className={microphoneLineClasses}
             onClick={onMicrophoneLineClick}
+            title={_t("Change input device")}
         >
             <MicrophoneIcon className="mx_Icon mx_Icon_16" />
             <span>{ microphoneLabel }</span>
-        </div>
+        </AccessibleTooltipButton>
     );
 
     return <div className="mx_VoiceBroadcastHeader">
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
index 06ebebb39f..7946cf0262 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
@@ -28,9 +28,9 @@ import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
 import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
 import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/Mic.svg";
 import { _t } from "../../../languageHandler";
-import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
 import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
+import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
 
 interface VoiceBroadcastRecordingPipProps {
     recording: VoiceBroadcastRecording;
@@ -91,12 +91,12 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
         <hr className="mx_VoiceBroadcastBody_divider" />
         <div className="mx_VoiceBroadcastBody_controls">
             { toggleControl }
-            <AccessibleButton
-                aria-label={_t("Change input device")}
+            <AccessibleTooltipButton
                 onClick={() => setShowDeviceSelect(true)}
+                title={_t("Change input device")}
             >
                 <MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
-            </AccessibleButton>
+            </AccessibleTooltipButton>
             <VoiceBroadcastControl
                 icon={StopIcon}
                 label="Stop Recording"
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
index c00d81e37d..0d05d5a280 100644
--- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
+++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
@@ -20,7 +20,10 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
         !room:example.com
       </div>
       <div
-        class="mx_VoiceBroadcastHeader_line"
+        aria-label="Change input device"
+        class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        role="button"
+        tabindex="0"
       >
         <div
           class="mx_Icon mx_Icon_16"
@@ -70,7 +73,10 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
         !room:example.com
       </div>
       <div
-        class="mx_VoiceBroadcastHeader_line"
+        aria-label="Change input device"
+        class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        role="button"
+        tabindex="0"
       >
         <div
           class="mx_Icon mx_Icon_16"
@@ -120,7 +126,10 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
         !room:example.com
       </div>
       <div
-        class="mx_VoiceBroadcastHeader_line"
+        aria-label="Change input device"
+        class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        role="button"
+        tabindex="0"
       >
         <div
           class="mx_Icon mx_Icon_16"
@@ -186,7 +195,10 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
         !room:example.com
       </div>
       <div
-        class="mx_VoiceBroadcastHeader_line"
+        aria-label="Change input device"
+        class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        role="button"
+        tabindex="0"
       >
         <div
           class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index 67c2566fab..54de19e1b2 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -23,7 +23,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -127,7 +130,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -239,7 +245,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -359,7 +368,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -463,7 +475,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
index 758d2c6371..09320c2402 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
@@ -23,7 +23,10 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
           !room@example.com
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line mx_VoiceBroadcastHeader_mic--clickable"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line mx_VoiceBroadcastHeader_mic--clickable"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
index 8bf0ee6065..91808369ad 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
@@ -23,7 +23,10 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -69,7 +72,10 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
           My room
         </div>
         <div
-          class="mx_VoiceBroadcastHeader_line"
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
         >
           <div
             class="mx_Icon mx_Icon_16"