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.

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
         };