ref(toolbar): add accessibility labels for torture tests (#2685)

* ref(toolbar): add accessibility labels for torture tests

* squash: update propTypes

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

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

react/features/toolbox/components/AbstractToolbarButton.js

@@ -13,6 +13,12 @@ export default class AbstractToolbarButton extends Component {
      * @static
      */
     static propTypes = {
+        /**
+         * A succinct description of what the button does. Used by accessibility
+         * tools and torture tests.
+         */
+        accessibilityLabel: PropTypes.string,
+
         /**
          * The name of the Icon of this {@code AbstractToolbarButton}.
          */

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

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

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

@@ -14,6 +14,12 @@ class OverflowMenuItem extends Component {
      * @static
      */
     static propTypes = {
+        /**
+         * A succinct description of what the item does. Used by accessibility
+         * tools and torture tests.
+         */
+        accessibilityLabel: PropTypes.string,
+
         /**
          * The icon class to use for displaying an icon before the link text.
          */
@@ -39,6 +45,7 @@ class OverflowMenuItem extends Component {
     render() {
         return (
             <li
+                aria-label = { this.props.accessibilityLabel }
                 className = 'overflow-menu-item'
                 onClick = { this.props.onClick }>
                 <span className = 'overflow-menu-item-icon'>

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

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

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

@@ -50,6 +50,7 @@ class ToolbarButtonV2 extends AbstractToolbarButton {
     _renderButton(children) {
         return (
             <div
+                aria-label = { this.props.accessibilityLabel }
                 className = 'toolbox-button'
                 onClick = { this.props.onClick }>
                 <Tooltip

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

@@ -45,13 +45,16 @@ class ToolboxFilmstrip extends Component<*> {
         const { t } = this.props;
 
         return (
-            <div className = 'filmstrip-toolbox'>
+            <div
+                className = 'filmstrip-toolbox'
+                id = 'new-toolbox'>
                 { this._shouldShowButton('microphone')
                     && <AudioMuteButton tooltipPosition = 'left' /> }
                 { this._shouldShowButton('camera')
                     && <VideoMuteButton tooltipPosition = 'left' /> }
                 { this._shouldShowButton('fodeviceselection')
                     && <ToolbarButtonV2
+                        accessibilityLabel = 'Settings'
                         iconName = 'icon-settings'
                         onClick = { this._onToolbarOpenSettings }
                         tooltip = { t('toolbar.Settings') }

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

@@ -333,6 +333,7 @@ class ToolboxV2 extends Component<Props, State> {
                         && this._renderDesktopSharingButton() }
                     { this._shouldShowButton('raisehand')
                         && <ToolbarButtonV2
+                            accessibilityLabel = 'Raised hand'
                             iconName = { _raisedHand
                                 ? 'icon-raised-hand toggled'
                                 : 'icon-raised-hand' }
@@ -341,6 +342,7 @@ class ToolboxV2 extends Component<Props, State> {
                     { this._shouldShowButton('chat')
                         && <div className = 'toolbar-button-with-badge'>
                             <ToolbarButtonV2
+                                accessibilityLabel = 'Chat'
                                 iconName = { _chatOpen
                                     ? 'icon-chat toggled'
                                     : 'icon-chat' }
@@ -361,6 +363,7 @@ class ToolboxV2 extends Component<Props, State> {
                     { this._shouldShowButton('invite')
                         && !_hideInviteButton
                         && <ToolbarButtonV2
+                            accessibilityLabel = 'Invite'
                             iconName = 'icon-add'
                             onClick = { this._onToolbarOpenInvite }
                             tooltip = { t('addPeople.title') } /> }
@@ -369,7 +372,9 @@ class ToolboxV2 extends Component<Props, State> {
                         && <OverflowMenuButton
                             isOpen = { this.state.showOverflowMenu }
                             onVisibilityChange = { this._onSetOverflowVisible }>
-                            <ul className = 'overflow-menu'>
+                            <ul
+                                aria-label = 'Overflow menu'
+                                className = 'overflow-menu'>
                                 { overflowMenuContent }
                             </ul>
                         </OverflowMenuButton> }
@@ -940,6 +945,7 @@ class ToolboxV2 extends Component<Props, State> {
 
         return (
             <ToolbarButtonV2
+                accessibilityLabel = 'Screenshare'
                 iconName = { classNames }
                 onClick = { this._onToolbarToggleScreenshare }
                 tooltip = { tooltip } />
@@ -969,12 +975,14 @@ class ToolboxV2 extends Component<Props, State> {
                     onClick = { this._onToolbarToggleProfile } />,
             this._shouldShowButton('settings')
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Settings'
                     icon = 'icon-settings'
                     key = 'settings'
                     onClick = { this._onToolbarToggleSettings }
                     text = { t('toolbar.Settings') } />,
             this._shouldShowButton('sharedvideo')
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Shared video'
                     icon = 'icon-shared-video'
                     key = 'sharedvideo'
                     onClick = { this._onToolbarToggleSharedVideo }
@@ -984,6 +992,7 @@ class ToolboxV2 extends Component<Props, State> {
             this._shouldShowButton('etherpad')
                 && _etherpadInitialized
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Etherpad'
                     icon = 'icon-share-doc'
                     key = 'etherpad'
                     onClick = { this._onToolbarToggleEtherpad }
@@ -992,6 +1001,7 @@ class ToolboxV2 extends Component<Props, State> {
                         : t('toolbar.documentOpen') } />,
             this._shouldShowButton('fullscreen')
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Full screen'
                     icon = { _fullScreen
                         ? 'icon-exit-full-screen'
                         : 'icon-full-screen' }
@@ -1003,12 +1013,14 @@ class ToolboxV2 extends Component<Props, State> {
             this._renderRecordingButton(),
             this._shouldShowButton('videoquality')
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Call quality'
                     icon = { 'icon-visibility' }
                     key = 'videoquality'
                     onClick = { this._onToolbarOpenVideoQuality }
                     text = { t('toolbar.callQuality') } />,
             this._shouldShowButton('stats')
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Speaker stats'
                     icon = 'icon-presentation'
                     key = 'stats'
                     onClick = { this._onToolbarOpenSpeakerStats }
@@ -1016,12 +1028,14 @@ class ToolboxV2 extends Component<Props, State> {
             this._shouldShowButton('feedback')
                 && _feedbackConfigured
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Feedback'
                     icon = 'icon-feedback'
                     key = 'feedback'
                     onClick = { this._onToolbarOpenFeedback }
                     text = { t('toolbar.feedback') } />,
             this._shouldShowButton('shortcuts')
                 && <OverflowMenuItem
+                    accessibilityLabel = 'Shortcuts'
                     icon = 'icon-open_in_new'
                     key = 'shortcuts'
                     onClick = { this._onToolbarOpenKeyboardShortcuts }
@@ -1062,6 +1076,7 @@ class ToolboxV2 extends Component<Props, State> {
 
         return (
             <OverflowMenuItem
+                accessibilityLabel = 'Record'
                 icon = 'fa fa-play-circle'
                 key = 'recording'
                 onClick = { this._onToolbarToggleRecording }

react/features/toolbox/components/buttons/AudioMuteButton.web.js

@@ -112,6 +112,7 @@ export class AudioMuteButton extends AbstractAudioMuteButton {
 
         return (
             <ToolbarButtonV2
+                accessibilityLabel = 'Audio mute'
                 iconName = { _audioMuted && _conference
                     ? 'icon-mic-disabled toggled'
                     : 'icon-microphone' }

react/features/toolbox/components/buttons/HangupButton.web.js

@@ -59,6 +59,7 @@ export class HangupButton extends AbstractHangupButton {
 
         return (
             <ToolbarButtonV2
+                accessibilityLabel = 'Hangup'
                 iconName = 'icon-hangup'
                 onClick = { this._onToolbarHangup }
                 tooltip = { t('toolbar.hangup') }

react/features/toolbox/components/buttons/VideoMuteButton.web.js

@@ -107,6 +107,7 @@ export class VideoMuteButton extends AbstractVideoMuteButton {
 
         return (
             <ToolbarButtonV2
+                accessibilityLabel = 'Video mute'
                 iconName = { _videoMuted && _conference
                     ? 'icon-camera-disabled toggled'
                     : 'icon-camera' }