add formatted messages for aria tags
This commit is contained in:
parent
a6389c863f
commit
5419ddd965
@ -1,12 +1,34 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import cx from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import Icon from '../../icon/component';
|
||||
import { styles } from './styles';
|
||||
|
||||
const intlMessages = defineMessages({
|
||||
wasTalking: {
|
||||
id: 'app.talkingIndicator.wasTalking',
|
||||
description: 'aria label for user who is not talking but still visible',
|
||||
},
|
||||
isTalking: {
|
||||
id: 'app.talkingIndicator.isTalking',
|
||||
description: 'aria label for user currently talking',
|
||||
},
|
||||
ariaMuteDesc: {
|
||||
id: 'app.talkingIndicator.ariaMuteDesc',
|
||||
description: 'aria description for muting a user',
|
||||
},
|
||||
});
|
||||
|
||||
class TalkingIndicator extends PureComponent {
|
||||
handleMuteUser(id) {
|
||||
const { muteUser, amIModerator } = this.props;
|
||||
if (!amIModerator) return;
|
||||
muteUser(id);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { talkers, muteUser, amIModerator } = this.props;
|
||||
const { intl, talkers, amIModerator } = this.props;
|
||||
if (!talkers) return null;
|
||||
|
||||
const talkingUserElements = Object.keys(talkers).map((name) => {
|
||||
@ -24,21 +46,29 @@ class TalkingIndicator extends PureComponent {
|
||||
[styles.unmuted]: !muted && amIModerator,
|
||||
};
|
||||
|
||||
const ariaLabel = talking ? intl.formatMessage(intlMessages.isTalking, {
|
||||
0: name,
|
||||
}) : intl.formatMessage(intlMessages.wasTalking, {
|
||||
0: name,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
key={_.uniqueId(`${name}-`)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={cx(style)}
|
||||
aria-label={ariaLabel}
|
||||
aria-describedby={talking ? 'description' : null}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={amIModerator ? () => {
|
||||
muteUser(voiceUserId);
|
||||
} : null}
|
||||
onClick={() => this.handleMuteUser(voiceUserId)}
|
||||
onKeyPress={() => this.handleMuteUser(voiceUserId)}
|
||||
>
|
||||
<span>{`${name}`}</span>
|
||||
{talking ? <Icon iconName="unmute" /> : null}
|
||||
{talking ? <div id="description" className={styles.hidden}>{`${intl.formatMessage(intlMessages.ariaMuteDesc)}`}</div> : null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -53,4 +83,4 @@ class TalkingIndicator extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export default TalkingIndicator;
|
||||
export default injectIntl(TalkingIndicator);
|
||||
|
@ -1,5 +1,6 @@
|
||||
@import "../../../stylesheets/variables/_all";
|
||||
@import "../../../stylesheets/variables/typography";
|
||||
@import "../../../stylesheets/mixins/_indicators";
|
||||
|
||||
:root {
|
||||
--spoke-padding-right: 1.3rem;
|
||||
@ -12,6 +13,10 @@
|
||||
--max-speaker-height: 1.5rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.isTalkingWrapper,
|
||||
.speaking,
|
||||
.talker,
|
||||
@ -37,6 +42,7 @@
|
||||
}
|
||||
|
||||
.talker {
|
||||
@include highContrastOutline();
|
||||
color: white;
|
||||
font-weight: var(--talker-font-weight);
|
||||
border-radius: var(--talker-border-radius) var(--talker-border-radius);
|
||||
|
@ -312,6 +312,9 @@
|
||||
"app.settings.save-notification.label": "Settings have been saved",
|
||||
"app.switch.onLabel": "ON",
|
||||
"app.switch.offLabel": "OFF",
|
||||
"app.talkingIndicator.ariaMuteDesc" : "Select to mute user",
|
||||
"app.talkingIndicator.isTalking" : "{0} is talking",
|
||||
"app.talkingIndicator.wasTalking" : "{0} stopped talking",
|
||||
"app.actionsBar.actionsDropdown.actionsLabel": "Actions",
|
||||
"app.actionsBar.actionsDropdown.presentationLabel": "Upload a presentation",
|
||||
"app.actionsBar.actionsDropdown.initPollLabel": "Initiate a poll",
|
||||
|
Loading…
Reference in New Issue
Block a user