haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

* squash: update propTypes
This commit is contained in:
virtuacoplenny 2018-04-03 12:32:00 -07:00 committed by bbaldino
parent f8717a7135
commit 7c08116dc2
11 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/features/invite/components/InfoDialogButton.web.js
View File

@ -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') } />

6
react/features/toolbox/components/AbstractToolbarButton.js
View File

@ -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}.
*/

1
react/features/toolbox/components/OverflowMenuButton.web.js
View File

@ -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') } />

7
react/features/toolbox/components/OverflowMenuItem.web.js
View File

@ -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'>

1
react/features/toolbox/components/OverflowMenuProfileItem.web.js
View File

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

1
react/features/toolbox/components/ToolbarButtonV2.web.js
View File

@ -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

5
react/features/toolbox/components/ToolboxFilmstrip.web.js
View File

@ -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') }

17
react/features/toolbox/components/ToolboxV2.web.js
View File

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

1
react/features/toolbox/components/buttons/AudioMuteButton.web.js
View File

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

1
react/features/toolbox/components/buttons/HangupButton.web.js
View File

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

1
react/features/toolbox/components/buttons/VideoMuteButton.web.js
View File

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