Merge pull request #12854 from PhMemmel/fix_private_chat_aria_alert

fix: Announce new private chat messages in screenreader

bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-unread-messages/component.jsx

@@ -12,28 +12,53 @@ const intlMessages = defineMessages({
     id: 'app.userList.chatListItem.unreadSingular',
     description: 'plural aria label for new messages',
   },
+  publicChat: {
+    id: 'app.chat.titlePublic',
+    description: 'localized public chat name',
+  },
 });
 
 const propTypes = {
   counter: PropTypes.number.isRequired,
+  chat: PropTypes.shape({
+    userId: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    unreadCounter: PropTypes.number.isRequired,
+  }).isRequired,
+  isPublicChat: PropTypes.func.isRequired,
   intl: PropTypes.shape({ formatMessage: PropTypes.func.isRequired }).isRequired,
 };
 
-const defaultProps = {
-};
+const defaultProps = {};
 
-const ChatUnreadCounter = props => (
-  <div
-    className={styles.unreadMessages}
-    aria-label={props.counter > 0
-      ? props.intl.formatMessage(intlMessages.unreadSingular, { 0: props.counter })
-      : props.intl.formatMessage(intlMessages.unreadPlural, { 0: props.counter })}
-  >
-    <div className={styles.unreadMessagesText} aria-hidden="true">
-      {props.counter}
+const ChatUnreadCounter = (props) => {
+  const {
+    counter,
+    chat,
+    isPublicChat,
+    intl,
+  } = props;
+
+  const localizedChatName = isPublicChat(chat)
+    ? intl.formatMessage(intlMessages.publicChat)
+    : chat.name;
+
+  const arialabel = `${localizedChatName} ${
+    counter > 1
+      ? intl.formatMessage(intlMessages.unreadPlural, { 0: counter })
+      : intl.formatMessage(intlMessages.unreadSingular)}`;
+
+  return (
+    <div
+      className={styles.unreadMessages}
+      aria-label={arialabel}
+    >
+      <div className={styles.unreadMessagesText} aria-hidden="true">
+        {counter}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 ChatUnreadCounter.propTypes = propTypes;
 ChatUnreadCounter.defaultProps = defaultProps;

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

@@ -163,7 +163,7 @@ const ChatListItem = (props) => {
               />
             )}
         </div>
-        <div className={styles.chatName}>
+        <div className={styles.chatName} aria-live="off">
           {!compact
             ? (
               <span className={styles.chatNameMain}>
@@ -175,6 +175,8 @@ const ChatListItem = (props) => {
         {(stateUreadCount > 0)
           ? (
             <ChatUnreadCounter
+              chat={chat}
+              isPublicChat={isPublicChat}
               counter={stateUreadCount}
             />
           )

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

@@ -138,7 +138,7 @@ class UserMessages extends PureComponent {
           className={styles.scrollableList}
           ref={(ref) => { this._msgsList = ref; }}
         >
-          <div className={styles.list}>
+          <div className={styles.list} aria-live="polite">
             <TransitionGroup ref={(ref) => { this._msgItems = ref; }}>
               {this.getActiveChats()}
             </TransitionGroup>

bigbluebutton-html5/public/locales/en.json

@@ -76,8 +76,8 @@
     "app.userList.guest": "Guest",
     "app.userList.sharingWebcam": "Webcam",
     "app.userList.menuTitleContext": "Available options",
-    "app.userList.chatListItem.unreadSingular": "{0} New Message",
-    "app.userList.chatListItem.unreadPlural": "{0} New Messages",
+    "app.userList.chatListItem.unreadSingular": "One new message",
+    "app.userList.chatListItem.unreadPlural": "{0} new messages",
     "app.userList.menu.chat.label": "Start a private chat",
     "app.userList.menu.clearStatus.label": "Clear status",
     "app.userList.menu.removeUser.label": "Remove user",