add formatted messages for aria tags

bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/component.jsx

@@ -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"
+          onClick={() => this.handleMuteUser(voiceUserId)}
-          tabIndex={0}
+          onKeyPress={() => this.handleMuteUser(voiceUserId)}
-          onClick={amIModerator ? () => {
-            muteUser(voiceUserId);
-          } : null}
         >
           <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);

bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss

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

bigbluebutton-html5/private/locales/en.json

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