From cf25e15eb6d3071dccb92c07e1f96bd726d56755 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Sat, 12 Jun 2021 12:49:15 +0200
Subject: [PATCH 1/9] Make call control buttons accessible to screen reader
 users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Peter Vágner <pvdeejay@gmail.com>
---
 src/components/views/voip/CallView.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index c084dacaa8f..178df246d18 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -441,6 +441,7 @@ export default class CallView extends React.Component<IProps, IState> {
         const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton
             className={vidClasses}
             onClick={this.onVidMuteClick}
+            aria-label={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
         /> : null;
 
         // The dial pad & 'more' button actions are only relevant in a connected call
@@ -450,6 +451,7 @@ export default class CallView extends React.Component<IProps, IState> {
             inputRef={this.dialpadButton}
             onClick={this.onDialpadClick}
             isExpanded={this.state.showDialpad}
+            aria-label={_t("Dialpad")}
         /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />;
 
         const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton
@@ -457,6 +459,7 @@ export default class CallView extends React.Component<IProps, IState> {
             onClick={this.onMoreClick}
             inputRef={this.contextMenuButton}
             isExpanded={this.state.showMoreMenu}
+            aria-label={_t("More")}
         /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />;
 
         // in the near future, the dial pad button will go on the left. For now, it's the nothing button
@@ -466,6 +469,7 @@ export default class CallView extends React.Component<IProps, IState> {
             <AccessibleButton
                 className={micClasses}
                 onClick={this.onMicMuteClick}
+                aria-label={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
             />
             <AccessibleButton
                 className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"

From 6458f717cc1cdc9a43993aea9f1ad350603ccfb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Sat, 12 Jun 2021 13:53:44 +0200
Subject: [PATCH 2/9] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Peter Vágner <pvdeejay@gmail.com>
---
 src/i18n/strings/en_EN.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 874dc11bd25..7df22432deb 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -889,6 +889,12 @@
     "sends snowfall": "sends snowfall",
     "Sends the given message with a space themed effect": "Sends the given message with a space themed effect",
     "sends space invaders": "sends space invaders",
+    "Start the camera": "Start the camera",
+    "Stop the camera": "Stop the camera",
+    "Dialpad": "Dialpad",
+    "More": "More",
+    "Unmute the microphone": "Unmute the microphone",
+    "Mute the microphone": "Mute the microphone",
     "unknown person": "unknown person",
     "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
     "You held the call <a>Switch</a>": "You held the call <a>Switch</a>",

From a94d11235ed5352b8da0ae87964abf2a00eddb33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Sat, 12 Jun 2021 14:17:10 +0200
Subject: [PATCH 3/9] Changed the buttons to TooltipButtons and added the
 tooltip for the hangup button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Peter Vágner <pvdeejay@gmail.com>
---
 src/components/views/voip/CallView.tsx | 21 ++++++++++++---------
 src/i18n/strings/en_EN.json            |  1 +
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 178df246d18..66b3f6b2d4c 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -25,6 +25,8 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
 import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} from '../../structures/ContextMenu';
 import CallContextMenu from '../context_menus/CallContextMenu';
@@ -438,40 +440,40 @@ export default class CallView extends React.Component<IProps, IState> {
             mx_CallView_callControls_hidden: !this.state.controlsVisible,
         });
 
-        const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton
+        const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleTooltipButton
             className={vidClasses}
             onClick={this.onVidMuteClick}
-            aria-label={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
+            title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
         /> : null;
 
         // The dial pad & 'more' button actions are only relevant in a connected call
         // When not connected, we have to put something there to make the flexbox alignment correct
-        const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton
+        const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuTooltipButton
             className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
             inputRef={this.dialpadButton}
             onClick={this.onDialpadClick}
             isExpanded={this.state.showDialpad}
-            aria-label={_t("Dialpad")}
+            title={_t("Dialpad")}
         /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />;
 
-        const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton
+        const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuTooltipButton
             className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
             onClick={this.onMoreClick}
             inputRef={this.contextMenuButton}
             isExpanded={this.state.showMoreMenu}
-            aria-label={_t("More")}
+            title={_t("More")}
         /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />;
 
         // in the near future, the dial pad button will go on the left. For now, it's the nothing button
         // because something needs to have margin-right: auto to make the alignment correct.
         const callControls = <div className={callControlsClasses}>
             {dialpadButton}
-            <AccessibleButton
+            <AccessibleTooltipButton
                 className={micClasses}
                 onClick={this.onMicMuteClick}
-                aria-label={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
+                title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
             />
-            <AccessibleButton
+            <AccessibleTooltipButton
                 className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
                 onClick={() => {
                     dis.dispatch({
@@ -479,6 +481,7 @@ export default class CallView extends React.Component<IProps, IState> {
                         room_id: callRoomId,
                     });
                 }}
+                title={_t("Hangup")}
             />
             {vidMuteButton}
             <div className={micCacheClasses} />
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7df22432deb..d50348954ab 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -895,6 +895,7 @@
     "More": "More",
     "Unmute the microphone": "Unmute the microphone",
     "Mute the microphone": "Mute the microphone",
+    "Hangup": "Hangup",
     "unknown person": "unknown person",
     "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
     "You held the call <a>Switch</a>": "You held the call <a>Switch</a>",

From fd7eaddb2d4c170084fbfc6ca3ca4c26f40a57b9 Mon Sep 17 00:00:00 2001
From: pvagner <pvdeejay@gmail.com>
Date: Wed, 16 Jun 2021 10:18:35 +0200
Subject: [PATCH 4/9] Update src/components/views/voip/CallView.tsx

Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
 src/components/views/voip/CallView.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 66b3f6b2d4c..f7f82d4300b 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -26,9 +26,13 @@ import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/we
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
-import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} from '../../structures/ContextMenu';
+import {
+    alwaysAboveLeftOf,
+    alwaysAboveRightOf,
+    ChevronFace,
+    ContextMenuTooltipButton,
+} from '../../structures/ContextMenu';
 import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';

From b2292268bc9a551a1b9ecfe535eafd3b823789d4 Mon Sep 17 00:00:00 2001
From: pvagner <pvdeejay@gmail.com>
Date: Wed, 30 Jun 2021 07:06:10 +0200
Subject: [PATCH 5/9] Update src/components/views/voip/CallView.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/voip/CallView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 6cb245f7b14..3f959622e70 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -26,7 +26,7 @@ import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/we
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
+import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
 import {
     alwaysAboveLeftOf,
     alwaysAboveRightOf,

From a8b050a385f8831904c083f7ef555a083e26eeff Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Aug 2021 13:37:23 +0100
Subject: [PATCH 6/9] Post-merge conflict resolution and improve alignment of
 tooltips

---
 src/components/views/voip/CallView.tsx | 50 ++++++++++++++++++++------
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 356e642d65f..3178566e68a 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -23,11 +23,16 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t, _td } from '../../../languageHandler';
 import VideoFeed from './VideoFeed';
 import RoomAvatar from "../avatars/RoomAvatar";
-import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
+import { CallEvent, CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
 import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
-import { alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton } from '../../structures/ContextMenu';
+import {
+    alwaysAboveLeftOf,
+    alwaysAboveRightOf,
+    ChevronFace,
+    ContextMenuTooltipButton,
+} from '../../structures/ContextMenu';
 import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';
@@ -37,6 +42,8 @@ import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker
 import Modal from '../../../Modal';
 import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
 import CallViewSidebar from './CallViewSidebar';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { Alignment } from "../elements/Tooltip";
 
 interface IProps {
         // The call for us to display
@@ -115,7 +122,6 @@ export default class CallView extends React.Component<IProps, IState> {
     private controlsHideTimer: number = null;
     private dialpadButton = createRef<HTMLDivElement>();
     private contextMenuButton = createRef<HTMLDivElement>();
-    private contextMenu = createRef<HTMLDivElement>();
 
     constructor(props: IProps) {
         super(props);
@@ -479,9 +485,12 @@ export default class CallView extends React.Component<IProps, IState> {
         let vidMuteButton;
         if (this.props.call.type === CallType.Video) {
             vidMuteButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className={vidClasses}
                     onClick={this.onVidMuteClick}
+                    title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
+                    alignment={Alignment.Top}
+                    yOffset={-20}
                 />
             );
         }
@@ -496,9 +505,15 @@ export default class CallView extends React.Component<IProps, IState> {
             this.props.call.state === CallState.Connected
         ) {
             screensharingButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className={screensharingClasses}
                     onClick={this.onScreenshareClick}
+                    title={this.state.screensharing
+                        ? _t("Stop sharing your screen")
+                        : _t("Start sharing your screen")
+                    }
+                    alignment={Alignment.Top}
+                    yOffset={-20}
                 />
             );
         }
@@ -518,6 +533,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 <AccessibleButton
                     className={sidebarButtonClasses}
                     onClick={this.onToggleSidebar}
+                    aria-label={this.state.sidebarShown ? _t("Hide sidebar") : _t("Show sidebar")}
                 />
             );
         }
@@ -526,22 +542,28 @@ export default class CallView extends React.Component<IProps, IState> {
         let contextMenuButton;
         if (this.state.callState === CallState.Connected) {
             contextMenuButton = (
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                     className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
                     onClick={this.onMoreClick}
                     inputRef={this.contextMenuButton}
                     isExpanded={this.state.showMoreMenu}
+                    title={_t("More")}
+                    alignment={Alignment.Top}
+                    yOffset={-20}
                 />
             );
         }
         let dialpadButton;
         if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) {
             dialpadButton = (
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                     className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
                     inputRef={this.dialpadButton}
                     onClick={this.onDialpadClick}
                     isExpanded={this.state.showDialpad}
+                    title={_t("Dialpad")}
+                    alignment={Alignment.Top}
+                    yOffset={-20}
                 />
             );
         }
@@ -583,9 +605,12 @@ export default class CallView extends React.Component<IProps, IState> {
                 { dialPad }
                 { contextMenu }
                 { dialpadButton }
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className={micClasses}
                     onClick={this.onMicMuteClick}
+                    title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
+                    alignment={Alignment.Top}
+                    yOffset={-20}
                 />
                 { vidMuteButton }
                 <div className={micCacheClasses} />
@@ -593,9 +618,12 @@ export default class CallView extends React.Component<IProps, IState> {
                 { screensharingButton }
                 { sidebarButton }
                 { contextMenuButton }
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
                     onClick={this.onHangupClick}
+                    title={_t("Hangup")}
+                    alignment={Alignment.Top}
+                    yOffset={-20}
                 />
             </div>
         );
@@ -820,7 +848,7 @@ export default class CallView extends React.Component<IProps, IState> {
         let fullScreenButton;
         if (!this.props.pipMode) {
             fullScreenButton = (
-                <div
+                <AccessibleTooltipButton
                     className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
                     onClick={this.onFullscreenClick}
                     title={_t("Fill Screen")}
@@ -830,7 +858,7 @@ export default class CallView extends React.Component<IProps, IState> {
 
         let expandButton;
         if (this.props.pipMode) {
-            expandButton = <div
+            expandButton = <AccessibleTooltipButton
                 className="mx_CallView_header_button mx_CallView_header_button_expand"
                 onClick={this.onExpandClick}
                 title={_t("Return to call")}

From 8ae95ddbb731592f701f2a6ab7de68627b7eb223 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Aug 2021 13:50:50 +0100
Subject: [PATCH 7/9] i18n

---
 src/i18n/strings/en_EN.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9664b2ca140..41ef0cc04f9 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -906,8 +906,12 @@
     "sends space invaders": "sends space invaders",
     "Start the camera": "Start the camera",
     "Stop the camera": "Stop the camera",
-    "Dialpad": "Dialpad",
+    "Stop sharing your screen": "Stop sharing your screen",
+    "Start sharing your screen": "Start sharing your screen",
+    "Hide sidebar": "Hide sidebar",
+    "Show sidebar": "Show sidebar",
     "More": "More",
+    "Dialpad": "Dialpad",
     "Unmute the microphone": "Unmute the microphone",
     "Mute the microphone": "Mute the microphone",
     "Hangup": "Hangup",

From e1b62ae38b15b503468f212f247dd9470e18c47a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Aug 2021 14:20:31 +0100
Subject: [PATCH 8/9] Increase yOffset by 4px away

---
 src/components/views/voip/CallView.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 3178566e68a..945cc55ed38 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -490,7 +490,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onVidMuteClick}
                     title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
                     alignment={Alignment.Top}
-                    yOffset={-20}
+                    yOffset={-24}
                 />
             );
         }
@@ -513,7 +513,7 @@ export default class CallView extends React.Component<IProps, IState> {
                         : _t("Start sharing your screen")
                     }
                     alignment={Alignment.Top}
-                    yOffset={-20}
+                    yOffset={-24}
                 />
             );
         }
@@ -549,7 +549,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     isExpanded={this.state.showMoreMenu}
                     title={_t("More")}
                     alignment={Alignment.Top}
-                    yOffset={-20}
+                    yOffset={-24}
                 />
             );
         }
@@ -563,7 +563,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     isExpanded={this.state.showDialpad}
                     title={_t("Dialpad")}
                     alignment={Alignment.Top}
-                    yOffset={-20}
+                    yOffset={-24}
                 />
             );
         }
@@ -610,7 +610,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onMicMuteClick}
                     title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
                     alignment={Alignment.Top}
-                    yOffset={-20}
+                    yOffset={-24}
                 />
                 { vidMuteButton }
                 <div className={micCacheClasses} />
@@ -623,7 +623,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onHangupClick}
                     title={_t("Hangup")}
                     alignment={Alignment.Top}
-                    yOffset={-20}
+                    yOffset={-24}
                 />
             </div>
         );

From b860acca8043ea9c8c937380650339566439f775 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 5 Aug 2021 14:43:44 +0100
Subject: [PATCH 9/9] Extract tooltipYOffset to a const

---
 src/components/views/voip/CallView.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 945cc55ed38..d301a1e43bc 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -82,6 +82,8 @@ interface IState {
     sidebarShown: boolean;
 }
 
+const tooltipYOffset = -24;
+
 function getFullScreenElement() {
     return (
         document.fullscreenElement ||
@@ -490,7 +492,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onVidMuteClick}
                     title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
                     alignment={Alignment.Top}
-                    yOffset={-24}
+                    yOffset={tooltipYOffset}
                 />
             );
         }
@@ -513,7 +515,7 @@ export default class CallView extends React.Component<IProps, IState> {
                         : _t("Start sharing your screen")
                     }
                     alignment={Alignment.Top}
-                    yOffset={-24}
+                    yOffset={tooltipYOffset}
                 />
             );
         }
@@ -549,7 +551,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     isExpanded={this.state.showMoreMenu}
                     title={_t("More")}
                     alignment={Alignment.Top}
-                    yOffset={-24}
+                    yOffset={tooltipYOffset}
                 />
             );
         }
@@ -563,7 +565,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     isExpanded={this.state.showDialpad}
                     title={_t("Dialpad")}
                     alignment={Alignment.Top}
-                    yOffset={-24}
+                    yOffset={tooltipYOffset}
                 />
             );
         }
@@ -610,7 +612,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onMicMuteClick}
                     title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
                     alignment={Alignment.Top}
-                    yOffset={-24}
+                    yOffset={tooltipYOffset}
                 />
                 { vidMuteButton }
                 <div className={micCacheClasses} />
@@ -623,7 +625,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onHangupClick}
                     title={_t("Hangup")}
                     alignment={Alignment.Top}
-                    yOffset={-24}
+                    yOffset={tooltipYOffset}
                 />
             </div>
         );