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.
2018-06-07 22:32:18 +02:00
parent 84f303dd3c
commit ccf0c8a363
28 changed files with 102 additions and 34 deletions
--- a/react/features/toolbox/components/AudioMuteButton.js
+++ b/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';

--- a/react/features/toolbox/components/HangupButton.js
+++ b/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';

--- a/react/features/toolbox/components/VideoMuteButton.js
+++ b/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';

--- a/react/features/toolbox/components/native/AudioOnlyButton.js
+++ b/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';
--- a/react/features/toolbox/components/native/OverflowMenuButton.js
+++ b/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';

--- a/react/features/toolbox/components/native/ToggleCameraButton.js
+++ b/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';

--- a/react/features/toolbox/components/web/OverflowMenuButton.js
+++ b/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') } />
--- a/react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js
+++ b/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'>
--- a/react/features/toolbox/components/web/OverflowMenuProfileItem.js
+++ b/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'>
--- a/react/features/toolbox/components/web/Toolbox.js
+++ b/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 }