From 44d7d749495c3c63672c4b1aa60a52356e31a307 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 4 Jan 2022 08:57:46 +0000 Subject: [PATCH] Call view accessibility fixes (#7439) --- res/css/views/voip/CallView/_CallViewButtons.scss | 12 +++++++----- res/css/views/voip/_CallView.scss | 8 -------- .../views/elements/DialPadBackspaceButton.tsx | 7 ++++++- src/components/views/voip/CallView.tsx | 14 +------------- src/components/views/voip/DialPad.tsx | 7 ++++++- src/i18n/strings/en_EN.json | 2 ++ 6 files changed, 22 insertions(+), 28 deletions(-) diff --git a/res/css/views/voip/CallView/_CallViewButtons.scss b/res/css/views/voip/CallView/_CallViewButtons.scss index b046ddf40a..9305d07f3b 100644 --- a/res/css/views/voip/CallView/_CallViewButtons.scss +++ b/res/css/views/voip/CallView/_CallViewButtons.scss @@ -16,6 +16,13 @@ See the License for the specific language governing permissions and limitations under the License. */ +// data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button +// which looks broken, so we match the behaviour of tooltips which is fine too. +[data-whatinput="mouse"] .mx_CallViewButtons.mx_CallViewButtons_hidden { + opacity: 0.001; // opacity 0 can cause a re-layout + pointer-events: none; +} + .mx_CallViewButtons { position: absolute; display: flex; @@ -26,11 +33,6 @@ limitations under the License. z-index: 200; // To be above _all_ feeds gap: 18px; - &.mx_CallViewButtons_hidden { - opacity: 0.001; // opacity 0 can cause a re-layout - pointer-events: none; - } - .mx_CallViewButtons_button { cursor: pointer; diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 46f9ed94dd..73a6f0d31a 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -211,9 +211,6 @@ limitations under the License. } .mx_CallView_presenting { - opacity: 1; - transition: opacity 0.5s; - position: absolute; margin-top: 18px; padding: 4px 8px; @@ -223,8 +220,3 @@ limitations under the License. color: white; background-color: #17191c; } - -.mx_CallView_presenting_hidden { - opacity: 0.001; // opacity 0 can cause a re-layout - pointer-events: none; -} diff --git a/src/components/views/elements/DialPadBackspaceButton.tsx b/src/components/views/elements/DialPadBackspaceButton.tsx index ce9dbffe7e..57c6ee474e 100644 --- a/src/components/views/elements/DialPadBackspaceButton.tsx +++ b/src/components/views/elements/DialPadBackspaceButton.tsx @@ -16,6 +16,7 @@ limitations under the License. import * as React from "react"; +import { _t } from "../../../languageHandler"; import AccessibleButton, { ButtonEvent } from "./AccessibleButton"; interface IProps { @@ -26,7 +27,11 @@ interface IProps { export default class DialPadBackspaceButton extends React.PureComponent { render() { return
- +
; } } diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 2851c2d04e..cb0a0d4081 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -68,10 +68,6 @@ interface IState { vidMuted: boolean; screensharing: boolean; callState: CallState; - controlsVisible: boolean; - hoveringControls: boolean; - showMoreMenu: boolean; - showDialpad: boolean; primaryFeed: CallFeed; secondaryFeeds: Array; sidebarShown: boolean; @@ -123,10 +119,6 @@ export default class CallView extends React.Component { vidMuted: this.props.call.isLocalVideoMuted(), screensharing: this.props.call.isScreensharing(), callState: this.props.call.state, - controlsVisible: true, - hoveringControls: false, - showMoreMenu: false, - showDialpad: false, primaryFeed: primary, secondaryFeeds: secondary, sidebarShown: true, @@ -573,10 +565,6 @@ export default class CallView extends React.Component { let toast; if (someoneIsScreensharing) { - const presentingClasses = classNames({ - mx_CallView_presenting: true, - mx_CallView_presenting_hidden: !this.state.controlsVisible, - }); const sharerName = this.state.primaryFeed.getMember().name; let text = isScreensharing ? _t("You are presenting") @@ -588,7 +576,7 @@ export default class CallView extends React.Component { } toast = ( -
+
{ text }
); diff --git a/src/components/views/voip/DialPad.tsx b/src/components/views/voip/DialPad.tsx index 6b8f013297..4af98a4a35 100644 --- a/src/components/views/voip/DialPad.tsx +++ b/src/components/views/voip/DialPad.tsx @@ -18,6 +18,7 @@ import * as React from "react"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { _t } from "../../../languageHandler"; const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']; const BUTTON_LETTERS = ['', 'ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQRS', 'TUV', 'WXYZ', '', '+', '']; @@ -49,7 +50,11 @@ class DialPadButton extends React.PureComponent {
; case DialPadButtonKind.Dial: - return ; + return ; } } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 93cb7e3a8b..3f176fcf7b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -979,6 +979,7 @@ "%(sharerName)s is presenting": "%(sharerName)s is presenting", "Your camera is turned off": "Your camera is turned off", "Your camera is still enabled": "Your camera is still enabled", + "Dial": "Dial", "Dialpad": "Dialpad", "Mute the microphone": "Mute the microphone", "Unmute the microphone": "Unmute the microphone", @@ -2180,6 +2181,7 @@ "Share entire screen": "Share entire screen", "Application window": "Application window", "Share content": "Share content", + "Backspace": "Backspace", "Join": "Join", "Please create a new issue on GitHub so that we can investigate this bug.": "Please create a new issue on GitHub so that we can investigate this bug.", "collapse": "collapse",