Merge pull request #10608 from KDSBrowne/2.3-emoji-active-sr-label

Make emoji list item announce active state for screen readers

bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
 import _ from 'lodash';
 import cx from 'classnames';
 import Icon from '/imports/ui/components/icon/component';
@@ -18,7 +19,13 @@ const defaultProps = {
   tabIndex: 0,
 };
 
-export default class DropdownListItem extends Component {
+const messages = defineMessages({
+  activeAriaLabel: {
+    id: 'app.dropdown.list.item.activeLabel',
+  },
+});
+
+class DropdownListItem extends Component {
   constructor(props) {
     super(props);
     this.labelID = _.uniqueId('dropdown-item-label-');
@@ -38,9 +45,12 @@ export default class DropdownListItem extends Component {
   render() {
     const {
       id, label, description, children, injectRef, tabIndex, onClick, onKeyDown,
-      className, style,
+      className, style, intl,
     } = this.props;
 
+    const isSelected = className && className.includes('emojiSelected');
+    const _label = isSelected ? `${label} (${intl.formatMessage(messages.activeAriaLabel)})` : label;
+
     return (
       <li
         id={id}
@@ -59,8 +69,8 @@ export default class DropdownListItem extends Component {
           children || this.renderDefault()
         }
         {
-          label ?
-            (<span id={this.labelID} key="labelledby" hidden>{label}</span>)
+          label
+            ? (<span id={this.labelID} key="labelledby" hidden>{_label}</span>)
             : null
         }
         <span id={this.descID} key="describedby" hidden>{description}</span>
@@ -69,5 +79,7 @@ export default class DropdownListItem extends Component {
   }
 }
 
+export default injectIntl(DropdownListItem);
+
 DropdownListItem.propTypes = propTypes;
 DropdownListItem.defaultProps = defaultProps;

bigbluebutton-html5/private/locales/en.json

@@ -373,7 +373,7 @@
     "app.actionsBar.emojiMenu.statusTriggerLabel": "Set status",
     "app.actionsBar.emojiMenu.awayLabel": "Away",
     "app.actionsBar.emojiMenu.awayDesc": "Change your status to away",
-    "app.actionsBar.emojiMenu.raiseHandLabel": "Raise",
+    "app.actionsBar.emojiMenu.raiseHandLabel": "Raise hand",
     "app.actionsBar.emojiMenu.raiseHandDesc": "Raise your hand to ask a question",
     "app.actionsBar.emojiMenu.neutralLabel": "Undecided",
     "app.actionsBar.emojiMenu.neutralDesc": "Change your status to undecided",
@@ -488,6 +488,7 @@
     "app.modal.newTab": "(opens new tab)",
     "app.modal.confirm.description": "Saves changes and closes the modal",
     "app.dropdown.close": "Close",
+    "app.dropdown.list.item.activeLabel": "Active",
     "app.error.400": "Bad Request",
     "app.error.401": "Unauthorized",
     "app.error.403": "You have been removed from the meeting",