fix(i18n) Accessiblity labels translations (#3071)

* fix(toolbar): accessibilityLabel should be translatable.

This commit adds a helper property to get the accessibilityLabel of an item,
providing a translation if one is available. This mimics the behavior of
label and tooltip.

* fix(toolbar) 'hangup' button accessibilityLabel i18n

* fix(toolbar) 'mute' button accessibilityLabel i18n

* fix(toolbar) 'videomute' button accessibilityLabel i18n

* fix(toolbar) 'moreActions' button accessibilityLabel i18n

* fix(toolbar) 'shareRoom' button accessibilityLabel i18n

* fix(toolbar) 'audioRoute' button accessibilityLabel i18n

* fix(toolbar) 'toggleCamera' button accessibilityLabel i18n

* fix(toolbar) 'audioOnly' button accessibilityLabel i18n

* fix(toolbar) 'roomLock' button accessibilityLabel i18n

* fix(toolbar) 'pip' button accessibilityLabel i18n

* fix(toolbar) 'invite' button accessibilityLabel i18n

* fix(toolbar) 'raiseHand' button accessibilityLabel i18n

* fix(toolbar) 'chat' button accessibilityLabel i18n

* fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n

* fix(toolbar) 'fullScreen' button accessibilityLabel i18n

* fix(toolbar) 'sharedvideo' button accessibilityLabel i18n

* fix(toolbar) 'document' button accessibilityLabel i18n

* fix(toolbar) 'speakerStats' button accessibilityLabel i18n

* fix(toolbar) 'feedback' button accessibilityLabel i18n

* fix(toolbar) 'shortcuts' button accessibilityLabel i18n

* fix(toolbar) 'recording' button accessibilityLabel i18n

* fix(toolbar) 'settings' button accessibilityLabel i18n

* fix(welcomepage) accessibilityLabels i18n

* fix(toolbar) 'info' button accessibilityLabel i18n

* fix(i18n): Add translation to various aria-label property values.

* fix(i18n): Differentiate between overflow menu and button.

lang/main.json

@@ -46,6 +46,10 @@
         "showSpeakerStats": "Show speaker stats"
     },
     "welcomepage":{
+        "accessibilityLabel": {
+            "join": "Tap to join",
+            "roomname": "Enter room name"
+        },
         "appDescription": "Go ahead, video chat with the whole team. In fact, invite everyone you know. __app__ is a fully encrypted, 100% open source video conferencing solution that you can use all day, every day, for free — with no account needed.",
         "audioVideoSwitch": {
             "audio": "Voice",
@@ -72,6 +76,33 @@
         "rejoinKeyTitle": "Rejoin"
     },
     "toolbar": {
+        "accessibilityLabel": {
+            "audioOnly": "Toggle audio only",
+            "audioRoute": "Select the audio route",
+            "callQuality": "Manage call quality",
+            "chat": "Toggle chat window",
+            "document": "Toggle shared document",
+            "feedback": "Leave feedback",
+            "fullScreen": "Toggle full screen",
+            "hangup": "Leave the call",
+            "invite": "Invite people",
+            "lockRoom": "Toggle room lock",
+            "moreActions": "Toggle more actions menu",
+            "moreActionsMenu": "More actions menu",
+            "mute": "Toggle mute audio",
+            "pip": "Toggle Picture-in-Picture mode",
+            "profile": "Edit your profile",
+            "raiseHand": "Toggle raise hand",
+            "recording": "Toggle recording",
+            "Settings": "Toggle settings",
+            "sharedvideo": "Toggle Youtube video sharing",
+            "shareRoom": "Invite someone",
+            "shareYourScreen": "Toggle screenshare",
+            "shortcuts": "Toggle shortcuts",
+            "speakerStats": "Toggle speaker statistics",
+            "toggleCamera": "Toggle camera",
+            "videomute": "Toggle mute video"
+        },
         "addPeople": "Add people to your call",
         "audioonly": "Enable / Disable audio only mode (saves bandwidth)",
         "audioOnlyOn": "Enable audio only mode (saves bandwidth)",
@@ -207,6 +238,9 @@
         "suboptimalExperienceDescription": "Eer... we are afraid your experience with __appName__ isn't going to be that great here. We are looking for ways to improve this but, until then, please try using one of the <a href='static/recommendedBrowsers.html' target='_blank'>fully supported browsers</a>."
     },
     "dialog": {
+        "accessibilityLabel": {
+            "liveStreaming": "Live Stream"
+        },
         "allow": "Allow",
         "confirm": "Confirm",
         "kickMessage": "Ouch! You have been kicked out of the meet!",
@@ -523,6 +557,7 @@
         "veryGood": "Very Good"
     },
     "info": {
+        "accessibilityLabel": "Show info",
         "addPassword": "Add password",
         "cancelPassword": "Cancel password",
         "conferenceURL": "Link:",

react/features/always-on-top/AudioMuteButton.js

@@ -27,6 +27,8 @@ type State = {
 export default class AudioMuteButton
     extends AbstractAudioMuteButton<Props, State> {
 
+    accessibilityLabel = 'Audio mute';
+
     /**
      * Initializes a new {@code AudioMuteButton} instance.
      *

react/features/always-on-top/HangupButton.js

@@ -9,6 +9,9 @@ const { api } = window.alwaysOnTop;
  * Stateless hangup button for the Always-on-Top windows.
  */
 export default class HangupButton extends AbstractHangupButton<Props, *> {
+
+    accessibilityLabel = 'Hangup';
+
     /**
      * Helper function to perform the actual hangup action.
      *

react/features/always-on-top/VideoMuteButton.js

@@ -27,6 +27,8 @@ type State = {
 export default class VideoMuteButton
     extends AbstractVideoMuteButton<Props, State> {
 
+    accessibilityLabel = 'Video mute';
+
     /**
      * Initializes a new {@code VideoMuteButton} instance.
      *

react/features/base/toolbox/components/AbstractAudioMuteButton.js

@@ -9,7 +9,6 @@ import type { Props } from './AbstractButton';
 export default class AbstractAudioMuteButton<P: Props, S: *>
     extends AbstractButton<P, S> {
 
-    accessibilityLabel = 'Audio mute';
     iconName = 'icon-microphone';
     toggledIconName = 'icon-mic-disabled toggled';
 

react/features/base/toolbox/components/AbstractHangupButton.js

@@ -9,7 +9,6 @@ import type { Props } from './AbstractButton';
 export default class AbstractHangupButton<P : Props, S: *>
     extends AbstractButton<P, S> {
 
-    accessibilityLabel = 'Hangup';
     iconName = 'icon-hangup';
 
     /**

react/features/base/toolbox/components/AbstractToolboxItem.js

@@ -146,6 +146,17 @@ export default class AbstractToolboxItem<P : Props> extends Component<P> {
         return this._maybeTranslateAttribute(this.props.tooltip);
     }
 
+    /**
+     * Helper property to get the item accessibilityLabel. If a translation
+     * function was provided then it will be translated using it.
+     *
+     * @protected
+     * @returns {?string}
+     */
+    get accessibilityLabel(): ?string {
+        return this._maybeTranslateAttribute(this.props.accessibilityLabel);
+    }
+
     /**
      * Utility function to translate the given string, if a translation
      * function is available.

react/features/base/toolbox/components/AbstractVideoMuteButton.js

@@ -9,7 +9,6 @@ import type { Props } from './AbstractButton';
 export default class AbstractVideoMuteButton<P : Props, S : *>
     extends AbstractButton<P, S> {
 
-    accessibilityLabel = 'Video mute';
     iconName = 'icon-camera';
     toggledIconName = 'icon-camera-disabled toggled';
 

react/features/base/toolbox/components/ToolboxItem.native.js

@@ -50,7 +50,6 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
      */
     _renderItem() {
         const {
-            accessibilityLabel,
             disabled,
             onClick,
             showLabel,
@@ -83,7 +82,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
 
         return (
             <TouchableHighlight
-                accessibilityLabel = { accessibilityLabel }
+                accessibilityLabel = { this.accessibilityLabel }
                 disabled = { disabled }
                 onPress = { onClick }
                 style = { style }

react/features/base/toolbox/components/ToolboxItem.web.js

@@ -21,12 +21,11 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
      */
     _renderItem() {
         const {
-            accessibilityLabel,
             onClick,
             showLabel
         } = this.props;
         const props = {
-            'aria-label': accessibilityLabel,
+            'aria-label': this.accessibilityLabel,
             className: showLabel ? 'overflow-menu-item' : 'toolbox-button',
             onClick
         };

react/features/invite/components/InfoDialogButton.web.js

@@ -170,7 +170,7 @@ class InfoDialogButton extends Component {
                     onClose = { this._onDialogClose }
                     position = { 'top right' }>
                     <ToolbarButton
-                        accessibilityLabel = 'Info'
+                        accessibilityLabel = { t('info.accessibilityLabel') }
                         iconName = { iconClass }
                         onClick = { this._onDialogToggle }
                         tooltip = { t('info.tooltip') } />

react/features/invite/components/InviteButton.native.js

@@ -52,7 +52,7 @@ const _SHARE_ROOM_TOOLBAR_BUTTON = true;
  * current call/conference/meeting.
  */
 class InviteButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Share room';
+    accessibilityLabel = 'toolbar.accessibilityLabel.shareRoom';
     iconName = 'icon-link';
     label = 'toolbar.shareRoom';
 

react/features/mobile/audio-mode/components/AudioRouteButton.js

@@ -43,7 +43,7 @@ type Props = AbstractButtonProps & {
  * A toolbar button which triggers an audio route picker when pressed.
  */
 class AudioRouteButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Audio route';
+    accessibilityLabel = 'toolbar.accessibilityLabel.audioRoute';
     iconName = 'icon-volume';
     label = 'toolbar.audioRoute';
 

react/features/mobile/picture-in-picture/components/PictureInPictureButton.js

@@ -26,7 +26,7 @@ type Props = AbstractButtonProps & {
  * An implementation of a button for entering Picture-in-Picture mode.
  */
 class PictureInPictureButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Picture in picture';
+    accessibilityLabel = 'toolbar.accessibilityLabel.pip';
     iconName = 'icon-menu-down';
     label = 'toolbar.pip';
 

react/features/room-lock/components/RoomLockButton.js

@@ -32,7 +32,7 @@ type Props = AbstractButtonProps & {
  * An implementation of a button for locking / unlocking a room.
  */
 class RoomLockButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Room lock';
+    accessibilityLabel = 'toolbar.accessibilityLabel.lockRoom';
     iconName = 'security';
     label = 'dialog.lockRoom';
     toggledIconName = 'security-locked';

react/features/settings/components/web/SettingsButton.js

@@ -36,7 +36,7 @@ type Props = AbstractButtonProps & {
  * An abstract implementation of a button for accessing settings.
  */
 class SettingsButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Settings';
+    accessibilityLabel = 'toolbar.accessibilityLabel.Settings';
     iconName = 'icon-settings';
     label = 'toolbar.Settings';
     tooltip = 'toolbar.Settings';

react/features/toolbox/components/AudioMuteButton.js

@@ -40,6 +40,7 @@ type Props = AbstractButtonProps & {
  * @extends AbstractAudioMuteButton
  */
 class AudioMuteButton extends AbstractAudioMuteButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.mute';
     label = 'toolbar.mute';
     tooltip = 'toolbar.mute';
 

react/features/toolbox/components/HangupButton.js

@@ -26,6 +26,7 @@ type Props = AbstractButtonProps & {
  * @extends AbstractHangupButton
  */
 class HangupButton extends AbstractHangupButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.hangup';
     label = 'toolbar.hangup';
     tooltip = 'toolbar.hangup';
 

react/features/toolbox/components/VideoMuteButton.js

@@ -49,6 +49,7 @@ type Props = AbstractButtonProps & {
  * @extends AbstractVideoMuteButton
  */
 class VideoMuteButton extends AbstractVideoMuteButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.videomute';
     label = 'toolbar.videomute';
     tooltip = 'toolbar.videomute';
 

react/features/toolbox/components/native/AudioOnlyButton.js

@@ -27,7 +27,7 @@ type Props = AbstractButtonProps & {
  * An implementation of a button for toggling the audio-only mode.
  */
 class AudioOnlyButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Audio only mode';
+    accessibilityLabel = 'toolbar.accessibilityLabel.audioOnly';
     iconName = 'visibility';
     label = 'toolbar.audioOnlyOn';
     toggledIconName = 'visibility-off';

react/features/toolbox/components/native/OverflowMenuButton.js

@@ -24,7 +24,7 @@ type Props = AbstractButtonProps & {
  * An implementation of a button for showing the {@code OverflowMenu}.
  */
 class OverflowMenuButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Overflow menu';
+    accessibilityLabel = 'toolbar.accessibilityLabel.moreActions';
     iconName = 'icon-thumb-menu';
     label = 'toolbar.moreActions';
 

react/features/toolbox/components/native/ToggleCameraButton.js

@@ -33,7 +33,7 @@ type Props = AbstractButtonProps & {
  * An implementation of a button for toggling the camera facing mode.
  */
 class ToggleCameraButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Toggle camera';
+    accessibilityLabel = 'toolbar.accessibilityLabel.toggleCamera';
     iconName = 'icon-switch-camera';
     label = 'toolbar.toggleCamera';
 

react/features/toolbox/components/web/OverflowMenuButton.js

@@ -73,7 +73,8 @@ class OverflowMenuButton extends Component {
                     onClose = { this._onCloseDialog }
                     position = { 'top right' }>
                     <ToolbarButton
-                        accessibilityLabel = 'Overflow'
+                        accessibilityLabel =
+                            { t('toolbar.accessibilityLabel.moreActions') }
                         iconName = { iconClasses }
                         onClick = { this._onToggleDialogVisibility }
                         tooltip = { t('toolbar.moreActions') } />

react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js

@@ -49,7 +49,7 @@ class OverflowMenuLiveStreamingItem extends Component<Props> {
 
         return (
             <li
-                aria-label = 'Live stream'
+                aria-label = { t('dialog.accessibilityLabel.liveStreaming') }
                 className = 'overflow-menu-item'
                 onClick = { onClick }>
                 <span className = 'overflow-menu-item-icon'>

react/features/toolbox/components/web/OverflowMenuProfileItem.js

@@ -74,7 +74,7 @@ class OverflowMenuProfileItem extends Component {
 
         return (
             <li
-                aria-label = 'Profile'
+                aria-label = 'Edit your profile'
                 className = { classNames }
                 onClick = { this._onClick }>
                 <span className = 'overflow-menu-item-icon'>

react/features/toolbox/components/web/Toolbox.js

@@ -336,6 +336,7 @@ class Toolbox extends Component<Props> {
         const overflowMenuContent = this._renderOverflowMenuContent();
         const overflowHasItems = Boolean(overflowMenuContent.filter(
             child => child).length);
+        const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
 
         return (
             <div
@@ -348,7 +349,8 @@ class Toolbox extends Component<Props> {
                         && this._renderDesktopSharingButton() }
                     { this._shouldShowButton('raisehand')
                         && <ToolbarButton
-                            accessibilityLabel = 'Raised hand'
+                            accessibilityLabel =
+                                { t('toolbar.accessibilityLabel.raiseHand') }
                             iconName = { _raisedHand
                                 ? 'icon-raised-hand toggled'
                                 : 'icon-raised-hand' }
@@ -357,7 +359,8 @@ class Toolbox extends Component<Props> {
                     { this._shouldShowButton('chat')
                         && <div className = 'toolbar-button-with-badge'>
                             <ToolbarButton
-                                accessibilityLabel = 'Chat'
+                                accessibilityLabel =
+                                    { t('toolbar.accessibilityLabel.chat') }
                                 iconName = { _chatOpen
                                     ? 'icon-chat toggled'
                                     : 'icon-chat' }
@@ -378,7 +381,8 @@ class Toolbox extends Component<Props> {
                     { this._shouldShowButton('invite')
                         && !_hideInviteButton
                         && <ToolbarButton
-                            accessibilityLabel = 'Invite'
+                            accessibilityLabel =
+                                { t('toolbar.accessibilityLabel.invite') }
                             iconName = 'icon-add'
                             onClick = { this._onToolbarOpenInvite }
                             tooltip = { t('toolbar.invite') } /> }
@@ -388,7 +392,7 @@ class Toolbox extends Component<Props> {
                             isOpen = { _overflowMenuVisible }
                             onVisibilityChange = { this._onSetOverflowVisible }>
                             <ul
-                                aria-label = 'Overflow menu'
+                                aria-label = { t(toolbarAccLabel) }
                                 className = 'overflow-menu'>
                                 { overflowMenuContent }
                             </ul>
@@ -946,7 +950,8 @@ class Toolbox extends Component<Props> {
 
         return (
             <ToolbarButton
-                accessibilityLabel = 'Screenshare'
+                accessibilityLabel
+                    = { t('toolbar.accessibilityLabel.shareYourScreen') }
                 iconName = { classNames }
                 onClick = { this._onToolbarToggleScreenshare }
                 tooltip = { tooltip } />
@@ -985,7 +990,8 @@ class Toolbox extends Component<Props> {
                     onClick = { this._onToolbarOpenVideoQuality } />,
             this._shouldShowButton('fullscreen')
                 && <OverflowMenuItem
-                    accessibilityLabel = 'Full screen'
+                    accessibilityLabel =
+                        { t('toolbar.accessibilityLabel.fullScreen') }
                     icon = { _fullScreen
                         ? 'icon-exit-full-screen'
                         : 'icon-full-screen' }
@@ -1005,7 +1011,8 @@ class Toolbox extends Component<Props> {
                 && this._renderRecordingButton(),
             this._shouldShowButton('sharedvideo')
                 && <OverflowMenuItem
-                    accessibilityLabel = 'Shared video'
+                    accessibilityLabel =
+                        { t('toolbar.accessibilityLabel.sharedvideo') }
                     icon = 'icon-shared-video'
                     key = 'sharedvideo'
                     onClick = { this._onToolbarToggleSharedVideo }
@@ -1015,7 +1022,8 @@ class Toolbox extends Component<Props> {
             this._shouldShowButton('etherpad')
                 && _etherpadInitialized
                 && <OverflowMenuItem
-                    accessibilityLabel = 'Etherpad'
+                    accessibilityLabel =
+                        { t('toolbar.accessibilityLabel.document') }
                     icon = 'icon-share-doc'
                     key = 'etherpad'
                     onClick = { this._onToolbarToggleEtherpad }
@@ -1028,7 +1036,8 @@ class Toolbox extends Component<Props> {
                 visible = { this._shouldShowButton('settings') } />,
             this._shouldShowButton('stats')
                 && <OverflowMenuItem
-                    accessibilityLabel = 'Speaker stats'
+                    accessibilityLabel =
+                        { t('toolbar.accessibilityLabel.speakerStats') }
                     icon = 'icon-presentation'
                     key = 'stats'
                     onClick = { this._onToolbarOpenSpeakerStats }
@@ -1036,14 +1045,16 @@ class Toolbox extends Component<Props> {
             this._shouldShowButton('feedback')
                 && _feedbackConfigured
                 && <OverflowMenuItem
-                    accessibilityLabel = 'Feedback'
+                    accessibilityLabel =
+                        { t('toolbar.accessibilityLabel.feedback') }
                     icon = 'icon-feedback'
                     key = 'feedback'
                     onClick = { this._onToolbarOpenFeedback }
                     text = { t('toolbar.feedback') } />,
             this._shouldShowButton('shortcuts')
                 && <OverflowMenuItem
-                    accessibilityLabel = 'Shortcuts'
+                    accessibilityLabel =
+                        { t('toolbar.accessibilityLabel.shortcuts') }
                     icon = 'icon-open_in_new'
                     key = 'shortcuts'
                     onClick = { this._onToolbarOpenKeyboardShortcuts }
@@ -1067,7 +1078,8 @@ class Toolbox extends Component<Props> {
 
         return (
             <OverflowMenuItem
-                accessibilityLabel = 'Record'
+                accessibilityLabel =
+                    { t('toolbar.accessibilityLabel.recording') }
                 icon = 'icon-camera-take-picture'
                 key = 'recording'
                 onClick = { this._onToolbarToggleRecording }

react/features/video-quality/components/OverflowMenuVideoQualityItem.web.js

@@ -68,7 +68,8 @@ class OverflowMenuVideoQualityItem extends Component<Props> {
 
         return (
             <li
-                aria-label = 'Call quality'
+                aria-label =
+                    { this.props.t('toolbar.accessibilityLabel.callQuality') }
                 className = 'overflow-menu-item'
                 onClick = { this.props.onClick }>
                 <span className = 'overflow-menu-item-icon'>

react/features/welcome/components/WelcomePage.native.js

@@ -85,6 +85,7 @@ class WelcomePage extends AbstractWelcomePage {
      */
     render() {
         const { buttonStyle, pageStyle } = Header;
+        const roomnameAccLabel = 'welcomepage.accessibilityLabel.roomname';
         const { t } = this.props;
 
         return (
@@ -101,7 +102,7 @@ class WelcomePage extends AbstractWelcomePage {
                     <SafeAreaView style = { styles.roomContainer } >
                         <View style = { styles.joinControls } >
                             <TextInput
-                                accessibilityLabel = { 'Input room name.' }
+                                accessibilityLabel = { t(roomnameAccLabel) }
                                 autoCapitalize = 'none'
                                 autoComplete = { false }
                                 autoCorrect = { false }
@@ -219,6 +220,7 @@ class WelcomePage extends AbstractWelcomePage {
      * @returns {ReactElement}
      */
     _renderJoinButton() {
+        const { t } = this.props;
         let children;
 
         /* eslint-disable no-extra-parens */
@@ -248,7 +250,8 @@ class WelcomePage extends AbstractWelcomePage {
 
         return (
             <TouchableHighlight
-                accessibilityLabel = { 'Tap to Join.' }
+                accessibilityLabel =
+                    { t('welcomepage.accessibilityLabel.join') }
                 disabled = { buttonDisabled }
                 onPress = { this._onJoin }
                 style = { [