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<IProps> {
render() {
return <div className="mx_DialPadBackspaceButtonWrapper">
- <AccessibleButton className="mx_DialPadBackspaceButton" onClick={this.props.onBackspacePress} />
+ <AccessibleButton
+ className="mx_DialPadBackspaceButton"
+ onClick={this.props.onBackspacePress}
+ aria-label={_t("Backspace")}
+ />
</div>;
}
}
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<CallFeed>;
sidebarShown: boolean;
@@ -123,10 +119,6 @@ export default class CallView extends React.Component<IProps, IState> {
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<IProps, IState> {
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<IProps, IState> {
}
toast = (
- <div className={presentingClasses}>
+ <div className="mx_CallView_presenting">
{ text }
</div>
);
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<IButtonProps> {
</div>
</AccessibleButton>;
case DialPadButtonKind.Dial:
- return <AccessibleButton className="mx_DialPad_button mx_DialPad_dialButton" onClick={this.onClick} />;
+ return <AccessibleButton
+ className="mx_DialPad_button mx_DialPad_dialButton"
+ onClick={this.onClick}
+ aria-label={_t("Dial")}
+ />;
}
}
}
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 <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
"collapse": "collapse",