diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx index 0c71b45665cec3428751f1d6d33ba73eb1398463..97a7174b025cf7defe285639e811044edf78298e 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx @@ -61,6 +61,8 @@ class ActionsDropdown extends Component { <Dropdown ref={(ref) => { this._dropdown = ref; }} > <DropdownTrigger tabIndex={0} > <Button + hideLabel + aria-label={intl.formatMessage(intlMessages.actionsLabel)} className={styles.button} label={intl.formatMessage(intlMessages.actionsLabel)} icon="plus" diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/emoji-select/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/emoji-select/component.jsx index f0644270e4c87c558f76a53f6d48be1a9de4eb03..2ba85150eb402e0e533759ed2632e0b5c35e34cc 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/emoji-select/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/emoji-select/component.jsx @@ -42,17 +42,21 @@ const EmojiSelect = ({ const statuses = Object.keys(options); const lastStatus = statuses.pop(); + const statusLabel = statuses.indexOf(selected) === -1 ? + intl.formatMessage(intlMessages.statusTriggerLabel) + : intl.formatMessage({ id: `app.actionsBar.emojiMenu.${selected}Label` }); + return ( <Dropdown autoFocus> <DropdownTrigger tabIndex={0}> <Button className={styles.button} - label={intl.formatMessage(intlMessages.statusTriggerLabel)} - aria-label={intl.formatMessage(intlMessages.changeStatusLabel)} + label={statusLabel} + aria-label={statusLabel} aria-describedby="currentStatus" icon={options[selected !== lastStatus ? selected : statuses[1]]} ghost={false} - hideLabel={false} + hideLabel circle size="lg" color="primary" diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx index e10ca43f675987f34f0cbcd14eef30896068b0b5..f03be42938e3da9c42dfd6fdacacebb6a55e048a 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx @@ -1,9 +1,30 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { defineMessages, intlShape, injectIntl } from 'react-intl'; import Button from '/imports/ui/components/button/component'; import styles from './styles'; import cx from 'classnames'; + +const intlMessages = defineMessages({ + joinAudio: { + id: 'app.audio.joinAudio', + description: 'Join audio button label', + }, + leaveAudio: { + id: 'app.audio.leaveAudio', + description: 'Leave audio button label', + }, + muteAudio: { + id: 'app.actionsBar.muteLabel', + description: 'Mute audio button label', + }, + unmuteAudio: { + id: 'app.actionsBar.unmuteLabel', + description: 'Unmute audio button label', + }, +}); + const propTypes = { handleToggleMuteMicrophone: PropTypes.func.isRequired, handleJoinAudio: PropTypes.func.isRequired, @@ -12,6 +33,7 @@ const propTypes = { unmute: PropTypes.bool.isRequired, mute: PropTypes.bool.isRequired, join: PropTypes.bool.isRequired, + intl: intlShape.isRequired, }; const AudioControls = ({ @@ -23,6 +45,7 @@ const AudioControls = ({ disable, glow, join, + intl, }) => ( <span className={styles.container}> {mute ? @@ -30,7 +53,9 @@ const AudioControls = ({ className={glow ? cx(styles.button, styles.glow) : styles.button} onClick={handleToggleMuteMicrophone} disabled={disable} - label={unmute ? 'Unmute' : 'Mute'} + hideLabel + label={unmute ? intl.formatMessage(intlMessages.unmuteAudio) : intl.formatMessage(intlMessages.muteAudio)} + aria-label={unmute ? intl.formatMessage(intlMessages.unmuteAudio) : intl.formatMessage(intlMessages.muteAudio)} color={'primary'} icon={unmute ? 'mute' : 'unmute'} size={'lg'} @@ -40,7 +65,9 @@ const AudioControls = ({ className={styles.button} onClick={join ? handleLeaveAudio : handleJoinAudio} disabled={disable} - label={join ? 'Leave Audio' : 'Join Audio'} + hideLabel + aria-label={join ? intl.formatMessage(intlMessages.leaveAudio) : intl.formatMessage(intlMessages.joinAudio)} + label={join ? intl.formatMessage(intlMessages.leaveAudio) : intl.formatMessage(intlMessages.joinAudio)} color={join ? 'danger' : 'primary'} icon={join ? 'audio_off' : 'audio_on'} size={'lg'} @@ -50,4 +77,4 @@ const AudioControls = ({ AudioControls.propTypes = propTypes; -export default AudioControls; +export default injectIntl(AudioControls);