fix aria-label not being announced for users in userlist

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx

@@ -249,7 +249,7 @@ class UserParticipants extends Component {
         }
         <div
           className={styles.scrollableList}
-          role="tabpanel"
+          role="list"
           tabIndex={0}
           ref={(ref) => { this.refScrollContainer = ref; }}
         >

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx

@@ -241,6 +241,7 @@ class UserListContent extends Component {
             intl={intl}
             meeting={meeting}
             isMeetingLocked={isMeetingLocked}
+            userAriaLabel={userAriaLabel}
           />}
           {<UserIcons
             user={user}

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/component.jsx

@@ -4,7 +4,6 @@ import { defineMessages } from 'react-intl';
 import Icon from '/imports/ui/components/icon/component';
 import { styles } from './styles';
 
-
 const messages = defineMessages({
   presenter: {
     id: 'app.userList.presenter',
@@ -31,6 +30,7 @@ const messages = defineMessages({
     description: 'aria label for each user in the userlist',
   },
 });
+
 const propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string.isRequired,
@@ -45,6 +45,7 @@ const propTypes = {
   }).isRequired,
   meeting: PropTypes.shape({}).isRequired,
   isMeetingLocked: PropTypes.func.isRequired,
+  userAriaLabel: PropTypes.string.isRequired,
 };
 
 const UserName = (props) => {
@@ -54,6 +55,7 @@ const UserName = (props) => {
     compact,
     isMeetingLocked,
     meeting,
+    userAriaLabel,
   } = props;
 
   if (compact) {
@@ -77,9 +79,8 @@ const UserName = (props) => {
     userNameSub.push(intl.formatMessage(messages.guest));
   }
 
-
   return (
-    <div className={styles.userName}>
+    <div className={styles.userName} role="button" aria-label={userAriaLabel}>
       <span className={styles.userNameMain}>
         {user.name} <i>{(user.isCurrent) ? `(${intl.formatMessage(messages.you)})` : ''}</i>
       </span>