fix(a11y) fix ambiguous label on toggle buttons

lang/main.json

@@ -1097,11 +1097,20 @@
             "cc": "Toggle subtitles",
             "chat": "Open / Close chat",
             "clap": "Clap",
+            "closeChat": "Close chat",
+            "closeMoreActions": "Close more actions menu",
+            "closeParticipantsPane": "Close participants pane",
             "collapse": "Collapse",
             "document": "Toggle shared document",
+            "documentClose": "Close shared document",
+            "documentOpen": "Open shared document",
             "download": "Download our apps",
             "embedMeeting": "Embed meeting",
             "endConference": "End meeting for all",
+            "enterFullScreen": "View full screen",
+            "enterTileView": "Enter tile view",
+            "exitFullScreen": "Exit full screen",
+            "exitTileView": "Exit tile view",
             "expand": "Expand",
             "feedback": "Leave feedback",
             "fullScreen": "Toggle full screen",
@@ -1110,6 +1119,7 @@
             "hangup": "Leave the meeting",
             "heading": "Toolbar",
             "help": "Help",
+            "hideWhiteboard": "Hide whiteboard",
             "invite": "Invite people",
             "kick": "Kick participant",
             "laugh": "Laugh",
@@ -1119,21 +1129,23 @@
             "lobbyButton": "Enable/disable lobby mode",
             "localRecording": "Toggle local recording controls",
             "lockRoom": "Toggle meeting password",
+            "lowerHand": "Lower your hand",
             "moreActions": "More actions",
             "moreActionsMenu": "More actions menu",
             "moreOptions": "Show more options",
-            "mute": "Mute / Unmute",
+            "mute": "Mute",
             "muteEveryone": "Mute everyone",
             "muteEveryoneElse": "Mute everyone else",
             "muteEveryoneElsesVideoStream": "Stop everyone else's video",
             "muteEveryonesVideoStream": "Stop everyone's video",
             "noiseSuppression": "Noise suppression",
-            "participants": "Participants",
+            "openChat": "Open chat",
+            "participants": "Open participants pane",
             "pip": "Toggle Picture-in-Picture mode",
             "privateMessage": "Send private message",
             "profile": "Edit your profile",
-            "raiseHand": "Raise / Lower your hand",
+            "raiseHand": "Raise your hand",
-            "reactionsMenu": "Open / Close reactions menu",
+            "reactionsMenu": "Reactions menu",
             "recording": "Toggle recording",
             "remoteMute": "Mute participant",
             "remoteVideoMute": "Disable camera of participant",
@@ -1141,20 +1153,24 @@
             "selectBackground": "Select Background",
             "selfView": "Toggle self view",
             "shareRoom": "Invite someone",
-            "shareYourScreen": "Start / Stop sharing your screen",
+            "shareYourScreen": "Start sharing your screen",
             "shareaudio": "Share audio",
-            "sharedvideo": "Toggle video sharing",
+            "sharedvideo": "Share video",
             "shortcuts": "Toggle shortcuts",
             "show": "Show on stage",
+            "showWhiteboard": "Show whiteboard",
             "silence": "Silence",
             "speakerStats": "Toggle participants statistics",
+            "stopScreenSharing": "Stop sharing your screen",
+            "stopSharedVideo": "Stop video",
             "surprised": "Surprised",
             "tileView": "Toggle tile view",
             "toggleCamera": "Toggle camera",
             "toggleFilmstrip": "Toggle filmstrip",
+            "unmute": "Unmute",
             "videoblur": "Toggle video blur",
-            "videomute": "Start / Stop camera",
+            "videomute": "Stop camera",
-            "whiteboard": "Show / Hide whiteboard"
+            "videounmute": "Start camera"
         },
         "addPeople": "Add people to your call",
         "audioOnlyOff": "Disable low bandwidth mode",
@@ -1167,6 +1183,7 @@
         "chat": "Open / Close chat",
         "clap": "Clap",
         "closeChat": "Close chat",
+        "closeParticipantsPane": "Close participants pane",
         "closeReactionsMenu": "Close reactions menu",
         "disableNoiseSuppression": "Disable noise suppression",
         "disableReactionSounds": "You can disable reaction sounds for this meeting",
@@ -1200,7 +1217,7 @@
         "lowerYourHand": "Lower your hand",
         "moreActions": "More actions",
         "moreOptions": "More options",
-        "mute": "Mute / Unmute",
+        "mute": "Mute",
         "muteEveryone": "Mute everyone",
         "muteEveryonesVideo": "Disable everyone's camera",
         "noAudioSignalDesc": "If you did not purposely mute it from system settings or hardware, consider switching the device.",
@@ -1217,7 +1234,7 @@
         "pip": "Enter Picture-in-Picture mode",
         "privateMessage": "Send private message",
         "profile": "Edit your profile",
-        "raiseHand": "Raise / Lower your hand",
+        "raiseHand": "Raise your hand",
         "raiseYourHand": "Raise your hand",
         "reactionBoo": "Send boo reaction",
         "reactionClap": "Send clap reaction",
@@ -1244,8 +1261,10 @@
         "talkWhileMutedPopup": "Trying to speak? You are muted.",
         "tileViewToggle": "Toggle tile view",
         "toggleCamera": "Toggle camera",
+        "unmute": "Unmute",
         "videoSettings": "Video settings",
-        "videomute": "Start / Stop camera"
+        "videomute": "Stop camera",
+        "videounmute": "Start camera"
     },
     "transcribing": {
         "ccButtonTooltip": "Start / Stop subtitles",

react/features/chat/components/web/ChatButton.js

@@ -24,30 +24,13 @@ type Props = AbstractButtonProps & {
  * Implementation of a button for accessing chat pane.
  */
 class ChatButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.chat';
+    accessibilityLabel = 'toolbar.accessibilityLabel.openChat';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.closeChat';
     icon = IconMessage;
     label = 'toolbar.openChat';
     toggledLabel = 'toolbar.closeChat';
-
+    tooltip = 'toolbar.openChat';
-    /**
+    toggledTooltip = 'toolbar.closeChat';
-     * Retrieves tooltip dynamically.
-     */
-    get tooltip() {
-        if (this._isToggled()) {
-            return 'toolbar.closeChat';
-        }
-
-        return 'toolbar.openChat';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
 
     /**
      * Indicates whether this button is in toggled state or not.

react/features/etherpad/components/SharedDocumentButton.web.js

@@ -27,30 +27,13 @@ type Props = AbstractButtonProps & {
  * Implements an {@link AbstractButton} to open the chat screen on mobile.
  */
 class SharedDocumentButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.document';
+    accessibilityLabel = 'toolbar.accessibilityLabel.documentOpen';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.documentClose';
     icon = IconShareDoc;
     label = 'toolbar.documentOpen';
     toggledLabel = 'toolbar.documentClose';
-
+    tooltip = 'toolbar.documentOpen';
-    /**
+    toggledTooltip = 'toolbar.documentClose';
-     * Dynamically retrieves tooltip based on sharing state.
-     */
-    get tooltip() {
-        if (this._isToggled()) {
-            return 'toolbar.documentClose';
-        }
-
-        return 'toolbar.documentOpen';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
 
     /**
      * Handles clicking / pressing the button, and opens / closes the appropriate dialog.

react/features/participants-pane/components/web/ParticipantsPaneButton.js

@@ -24,9 +24,11 @@ type Props = AbstractButtonProps & {
  */
 class ParticipantsPaneButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.participants';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.closeParticipantsPane';
     icon = IconUsers;
     label = 'toolbar.participants';
     tooltip = 'toolbar.participants';
+    toggledTooltip = 'toolbar.closeParticipantsPane';
 
     /**
      * Indicates whether this button is in toggled state or not.

react/features/reactions/components/web/RaiseHandButton.js

@@ -21,25 +21,12 @@ type Props = AbstractButtonProps & {
  */
 class RaiseHandButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.lowerHand';
     icon = IconRaiseHand;
     label = 'toolbar.raiseHand';
-    toggledLabel = 'toolbar.raiseHand';
+    toggledLabel = 'toolbar.lowerYourHand';
-
+    tooltip = 'toolbar.raiseHand';
-    /**
+    toggledTooltip = 'toolbar.lowerYourHand';
-     * Retrieves tooltip dynamically.
-     */
-    get tooltip() {
-        return 'toolbar.raiseHand';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
 
     /**
      * Indicates whether this button is in toggled state or not.

react/features/shared-video/components/web/SharedVideoButton.js

@@ -35,29 +35,12 @@ type Props = AbstractButtonProps & {
  */
 class SharedVideoButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.sharedvideo';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.stopSharedVideo';
     icon = IconPlay;
     label = 'toolbar.sharedvideo';
     toggledLabel = 'toolbar.stopSharedVideo';
-
+    tooltip = 'toolbar.sharedvideo';
-    /**
+    toggledTooltip = 'toolbar.stopSharedVideo';
-     * Dynamically retrieves tooltip based on sharing state.
-     */
-    get tooltip() {
-        if (this._isToggled()) {
-            return 'toolbar.stopSharedVideo';
-        }
-
-        return 'toolbar.sharedvideo';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The icon value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
 
     /**
      * Handles clicking / pressing the button, and opens a new dialog.

react/features/toolbox/components/AudioMuteButton.js

@@ -46,8 +46,10 @@ type Props = AbstractButtonProps & {
  */
 class AudioMuteButton extends AbstractAudioMuteButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.mute';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.unmute';
     label = 'toolbar.mute';
     tooltip = 'toolbar.mute';
+    toggledTooltip = 'toolbar.unmute';
 
     /**
      * Initializes a new {@code AudioMuteButton} instance.

react/features/toolbox/components/VideoMuteButton.js

@@ -47,8 +47,10 @@ type Props = AbstractButtonProps & {
  */
 class VideoMuteButton extends AbstractVideoMuteButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.videomute';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.videounmute';
     label = 'toolbar.videomute';
     tooltip = 'toolbar.videomute';
+    toggledTooltip = 'toolbar.videounmute';
 
     /**
      * Initializes a new {@code VideoMuteButton} instance.

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

@@ -17,9 +17,12 @@ type Props = AbstractButtonProps & {
  * Implementation of a button for toggling fullscreen state.
  */
 class FullscreenButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.fullScreen';
+    accessibilityLabel = 'toolbar.accessibilityLabel.enterFullScreen';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.exitFullScreen';
     label = 'toolbar.enterFullScreen';
     toggledLabel = 'toolbar.exitFullScreen';
+    tooltip = 'toolbar.enterFullScreen';
+    toggledTooltip = 'toolbar.exitFullScreen';
 
     /**
      * Retrieves icon dynamically.
@@ -41,26 +44,6 @@ class FullscreenButton extends AbstractButton<Props, *> {
         // Unused.
     }
 
-    /**
-     * Retrieves icon dynamically.
-     */
-    get tooltip() {
-        if (this._isToggled()) {
-            return 'toolbar.exitFullScreen';
-        }
-
-        return 'toolbar.enterFullScreen';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
-
     /**
      * Indicates whether this button is in toggled state or not.
      *

react/features/toolbox/components/web/HangupToggleButton.tsx

@@ -30,24 +30,9 @@ class HangupToggleButton extends AbstractButton<Props, any, any> {
     label = 'toolbar.hangup';
     toggledIcon = IconCloseLarge;
     toggledLabel = 'toolbar.hangup';
+    tooltip = 'toolbar.hangup';
     props: Props;
 
-    /**
-     * Retrieves tooltip dynamically.
-     */
-    get tooltip() {
-        return 'toolbar.hangup';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
-
     /**
      * Indicates whether this button is in toggled state or not.
      *

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

@@ -26,25 +26,11 @@ type Props = AbstractButtonProps & {
  */
 class OverflowToggleButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.moreActions';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.closeMoreActions';
     icon = IconDotsHorizontal;
     label = 'toolbar.moreActions';
     toggledLabel = 'toolbar.moreActions';
-
+    tooltip = 'toolbar.moreActions';
-    /**
-     * Retrieves tooltip dynamically.
-     */
-    get tooltip() {
-        return 'toolbar.moreActions';
-    }
-
-    /**
-     * Required by linter due to AbstractButton overwritten prop being writable.
-     *
-     * @param {string} _value - The value.
-     */
-    set tooltip(_value) {
-        // Unused.
-    }
 
     /**
      * Indicates whether this button is in toggled state or not.

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

@@ -31,11 +31,11 @@ type Props = AbstractButtonProps & {
  */
 class ShareDesktopButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.shareYourScreen';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.stopScreenSharing';
     label = 'toolbar.startScreenSharing';
     icon = IconScreenshare;
     toggledIcon = IconStopScreenshare;
     toggledLabel = 'toolbar.stopScreenSharing';
-    tooltip = 'toolbar.accessibilityLabel.shareYourScreen';
 
     /**
      * Retrieves tooltip dynamically.

react/features/video-layout/components/TileViewButton.js

@@ -38,7 +38,8 @@ type Props = AbstractButtonProps & {
  * @augments AbstractButton
  */
 class TileViewButton<P: Props> extends AbstractButton<P, *> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.tileView';
+    accessibilityLabel = 'toolbar.accessibilityLabel.enterTileView';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.exitTileView';
     icon = IconTileView;
     label = 'toolbar.enterTileView';
     toggledLabel = 'toolbar.exitTileView';

react/features/whiteboard/components/web/WhiteboardButton.tsx

@@ -27,7 +27,8 @@ type Props = AbstractButtonProps & {
  * Component that renders a toolbar button for the whiteboard.
  */
 class WhiteboardButton extends AbstractButton<Props, any, any> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.whiteboard';
+    accessibilityLabel = 'toolbar.accessibilityLabel.showWhiteboard';
+    toggledAccessibilityLabel = 'toolbar.accessibilityLabel.hideWhiteboard';
     icon = IconWhiteboard;
     label = 'toolbar.showWhiteboard';
     toggledIcon = IconWhiteboardHide;