mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-10-31 08:11:16 +01:00
Code Issues Projects Releases Wiki Activity

Make call control buttons accessible to screen reader users

Browse Source 
Signed-off-by: Peter Vágner <pvdeejay@gmail.com>
This commit is contained in:
Peter Vágner 2021-06-12 12:49:15 +02:00
parent 015890477d
commit cf25e15eb6
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/views/voip/CallView.tsx
View File

@ -441,6 +441,7 @@ export default class CallView extends React.Component<IProps, IState> {
const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton
className={vidClasses} className={vidClasses}
onClick={this.onVidMuteClick} onClick={this.onVidMuteClick}
aria-label={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
/> : null; /> : null;
// The dial pad & 'more' button actions are only relevant in a connected call // 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} inputRef={this.dialpadButton}
onClick={this.onDialpadClick} onClick={this.onDialpadClick}
isExpanded={this.state.showDialpad} isExpanded={this.state.showDialpad}
aria-label={_t("Dialpad")}
/> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />; /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />;
const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton
@ -457,6 +459,7 @@ export default class CallView extends React.Component<IProps, IState> {
onClick={this.onMoreClick} onClick={this.onMoreClick}
inputRef={this.contextMenuButton} inputRef={this.contextMenuButton}
isExpanded={this.state.showMoreMenu} isExpanded={this.state.showMoreMenu}
aria-label={_t("More")}
/> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />; /> : <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 // 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 <AccessibleButton
className={micClasses} className={micClasses}
onClick={this.onMicMuteClick} onClick={this.onMicMuteClick}
aria-label={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
/> />
<AccessibleButton <AccessibleButton
className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup" className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"