Make call control buttons accessible to screen reader users

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
@@ -75,6 +82,8 @@ interface IState {
     sidebarShown: boolean;
 }
 
+const tooltipYOffset = -24;
+
 function getFullScreenElement() {
     return (
         document.fullscreenElement ||
@@ -115,7 +124,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 +487,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={tooltipYOffset}
                 />
             );
         }
@@ -496,9 +507,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={tooltipYOffset}
                 />
             );
         }
@@ -518,6 +535,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 +544,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={tooltipYOffset}
                 />
             );
         }
         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={tooltipYOffset}
                 />
             );
         }
@@ -583,19 +607,25 @@ 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={tooltipYOffset}
                 />
                 { vidMuteButton }
                 <div className={micCacheClasses} />
                 <div className={vidCacheClasses} />
                 { 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={tooltipYOffset}
                 />
             </div>
         );
@@ -820,7 +850,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 +860,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")}

src/i18n/strings/en_EN.json

@@ -904,6 +904,17 @@
     "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",
+    "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",
     "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>",