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] 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 c084dacaa8..178df246d1 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"