Improve usability of toggled button labels (#12426)

* feat(a11y) buttons can now have toggled-aware a11y labels

lang/main.json

@@ -1098,11 +1098,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",
@@ -1111,6 +1120,7 @@
             "hangup": "Leave the meeting",
             "heading": "Toolbar",
             "help": "Help",
+            "hideWhiteboard": "Hide whiteboard",
             "invite": "Invite people",
             "kick": "Kick participant",
             "laugh": "Laugh",
@@ -1120,21 +1130,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",
-            "reactionsMenu": "Open / Close reactions menu",
+            "raiseHand": "Raise your hand",
+            "reactionsMenu": "Reactions menu",
             "recording": "Toggle recording",
             "remoteMute": "Mute participant",
             "remoteVideoMute": "Disable camera of participant",
@@ -1142,20 +1154,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",
-            "whiteboard": "Show / Hide whiteboard"
+            "videomute": "Stop camera",
+            "videounmute": "Start camera"
         },
         "addPeople": "Add people to your call",
         "audioOnlyOff": "Disable low bandwidth mode",
@@ -1168,6 +1184,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",
@@ -1201,7 +1218,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.",
@@ -1218,7 +1235,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",
@@ -1245,8 +1262,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/base/toolbox/components/AbstractButton.js

@@ -108,10 +108,21 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
      * A succinct description of what the button does. Used by accessibility
      * tools and torture tests.
      *
+     * If `toggledAccessibilityLabel` is defined, this is used only when the
+     * button is not toggled on.
+     *
      * @abstract
      */
     accessibilityLabel: string;
 
+    /**
+     * This is the same as `accessibilityLabel`, replacing it when the button
+     * is toggled on.
+     *
+     * @abstract
+     */
+    toggledAccessibilityLabel: string;
+
     labelProps: Object;
 
     /**
@@ -144,10 +155,22 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
     /**
      * The text to display in the tooltip. Used only on web.
      *
+     * If `toggleTooltip` is defined, this is used only when the button is not
+     * toggled on.
+     *
      * @abstract
      */
     tooltip: ?string;
 
+    /**
+     * The text to display in the tooltip when the button is toggled on.
+     *
+     * Used only on web.
+     *
+     * @abstract
+     */
+    toggledTooltip: ?string;
+
     /**
      * Initializes a new {@code AbstractButton} instance.
      *
@@ -221,6 +244,24 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
             || this.label;
     }
 
+    /**
+     * Gets the current accessibility label, taking the toggled state into
+     * account. If no toggled label is provided, the regular accessibility label
+     * will also be used in the toggled state.
+     *
+     * The accessibility label is not visible in the UI, it is meant to be
+     * used by assistive technologies, mainly screen readers.
+     *
+     * @private
+     * @returns {string}
+     */
+    _getAccessibilityLabel() {
+        return (this._isToggled()
+            ? this.toggledAccessibilityLabel
+            : this.accessibilityLabel
+        ) || this.accessibilityLabel;
+    }
+
     /**
      * Gets the current styles, taking the toggled state into account. If no
      * toggled styles are provided, the regular styles will also be used in the
@@ -257,7 +298,9 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
      * @returns {string}
      */
     _getTooltip() {
-        return this.tooltip || '';
+        return (this._isToggled() ? this.toggledTooltip : this.tooltip)
+            || this.tooltip
+            || '';
     }
 
     /**
@@ -324,7 +367,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
     render(): React$Node {
         const props = {
             ...this.props,
-            accessibilityLabel: this.accessibilityLabel,
+            accessibilityLabel: this._getAccessibilityLabel(),
             elementAfter: this._getElementAfter(),
             icon: this._getIcon(),
             label: this._getLabel(),

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';
-
-    /**
-     * 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.
-    }
+    tooltip = 'toolbar.openChat';
+    toggledTooltip = 'toolbar.closeChat';
 
     /**
      * 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';
-
-    /**
-     * 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.
-    }
+    tooltip = 'toolbar.documentOpen';
+    toggledTooltip = 'toolbar.documentClose';
 
     /**
      * 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';
-
-    /**
-     * 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.
-    }
+    toggledLabel = 'toolbar.lowerYourHand';
+    tooltip = 'toolbar.raiseHand';
+    toggledTooltip = 'toolbar.lowerYourHand';
 
     /**
      * 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';
-
-    /**
-     * 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.
-    }
+    tooltip = 'toolbar.sharedvideo';
+    toggledTooltip = 'toolbar.stopSharedVideo';
 
     /**
      * 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';
-
-    /**
-     * 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.
-    }
+    tooltip = 'toolbar.moreActions';
 
     /**
      * 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;