Call view accessibility fixes (#7439)

Author: t3chguy

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;
 

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;
-}

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>;
     }
 }

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>
                 );

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")}
+                />;
         }
     }
 }

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",