Merge pull request #3835 from KDSBrowne/accessibility-05-update

[HTML5] - Accessibility update 05

bigbluebutton-html5/imports/ui/components/chat/component.jsx

@@ -40,7 +40,7 @@ class Chat extends Component {
     } = this.props;
 
     return (
-      <section className={styles.chat}>
+      <div className={styles.chat}>
 
         <header className={styles.header}>
           <div className={styles.title}>
@@ -83,7 +83,7 @@ class Chat extends Component {
           chatName={chatName}
           handleSendMessage={actions.handleSendMessage}
         />
-      </section>
+      </div>
     );
   }
 }

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

@@ -15,6 +15,10 @@ const intlMessages = defineMessages({
     id: 'app.chat.moreMessages',
     description: 'Chat message when the user has unread messages below the scroll',
   },
+  emptyLogLabel: {
+    id: 'app.chat.emptyLogLabel',
+    description: 'aria-label used when chat log is empty',
+  }
 });
 
 class MessageList extends Component {
@@ -132,19 +136,20 @@ class MessageList extends Component {
   }
 
   render() {
-    const { messages } = this.props;
+    const { messages, intl } = this.props;
 
     return (
       <div className={styles.messageListWrapper}>
         <div
-          tabIndex="0"
           role="log"
-          aria-atomic="false"
+          tabIndex="0"
-          aria-live="polite"
-          aria-relevant="additions"
           ref="scrollArea"
-          className={styles.messageList}
           id={this.props.id}
+          className={styles.messageList}
+          aria-live="polite"
+          aria-atomic="false"
+          aria-relevant="additions"
+          aria-label={intl.formatMessage(intlMessages.emptyLogLabel)}
         >
           {messages.map((message) => (
             <MessageListItem

bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss

@@ -17,6 +17,10 @@
   }
 }
 
+.title {
+  color: $color-gray;
+  font-weight: 600;
+}
 
 .separator {
   display: flex;

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

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+import styles from '../styles';
+
+const propTypes = {
+  description: PropTypes.string,
+};
+
+export default class DropdownListTitle extends Component {
+
+  render() {
+    const { intl, description } = this.props;
+
+    return (
+      <div>
+        <li className={styles.title} aria-describedby="labelContext">{this.props.children}</li>
+        <div id="labelContext" aria-label={description}></div>
+      </div>
+    );
+  }
+}
+
+DropdownListTitle.propTypes = propTypes;

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

@@ -15,7 +15,8 @@ import DropdownContent from '/imports/ui/components/dropdown/content/component';
 import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import DropdownListSeparator from '/imports/ui/components/dropdown/list/separator/component';
-
+import DropdownListTitle from '/imports/ui/components/dropdown/list/title/component';
+
 const propTypes = {
   user: React.PropTypes.shape({
     name: React.PropTypes.string.isRequired,
@@ -45,6 +46,10 @@ const messages = defineMessages({
     id: 'app.userlist.you',
     description: 'Text for identifying your user',
   },
+  menuTitleContext: {
+    id: 'app.userlist.menuTitleContext',
+    description: 'adds context to userListItem menu title',
+  }
 });
 
 const userActionsTransition = {
@@ -163,7 +168,7 @@ class UserListItem extends Component {
       if (!isDropdownVisible) {
         const offsetPageTop =
           (dropdownTrigger.offsetTop + dropdownTrigger.offsetHeight - scrollContainer.scrollTop);
-          
+
         nextState.dropdownOffset = window.innerHeight - offsetPageTop;
         nextState.dropdownDirection = 'bottom';
       }
@@ -174,7 +179,7 @@ class UserListItem extends Component {
 
   /**
   * Check if the dropdown is visible and is opened by the user
-  * 
+  *
   * @return True if is visible and opened by the user.
   */
   isDropdownActivedByUser() {
@@ -184,8 +189,8 @@ class UserListItem extends Component {
 
   /**
    * Return true if the content fit on the screen, false otherwise.
-   * 
+   *
-   * @param {number} contentOffSetTop 
+   * @param {number} contentOffSetTop
    * @param {number} contentOffsetHeight
    * @return True if the content fit on the screen, false otherwise.
    */
@@ -230,7 +235,9 @@ class UserListItem extends Component {
     return (
       <li
         role="button"
-        aria-haspopup="true"
+        aria-haspopup="true"
+        aria-live="assertive"
+        aria-relevant="additions"
         className={cx(styles.userListItem, userItemContentsStyle)}>
         {this.renderUserContents()}
       </li>
@@ -240,6 +247,7 @@ class UserListItem extends Component {
   renderUserContents() {
     const {
       user,
+      intl,
     } = this.props;
 
     let actions = this.getAvailableActions();
@@ -277,13 +285,11 @@ class UserListItem extends Component {
 
           <DropdownList>
             {
-              [
+              [
-                (<DropdownListItem
+                (<DropdownListTitle
-                  className={styles.actionsHeader}
+                    description={intl.formatMessage(messages.menuTitleContext)}>
-                  key={_.uniqueId('action-header')}
+                      {user.name}
-                  label={user.name}
+                 </DropdownListTitle>),
-                  style={{ fontWeight: 600 }}
-                  defaultMessage={user.name} />),
                 (<DropdownListSeparator key={_.uniqueId('action-separator')} />),
               ].concat(actions)
             }

bigbluebutton-html5/private/locales/en.json

@@ -15,9 +15,11 @@
   "app.chat.closeChatLabel": "Close {title}",
   "app.chat.hideChatLabel": "Hide {title}",
   "app.chat.moreMessages": "More messages below",
+  "app.userlist.menuTitleContext": "available options",
   "app.userlist.chatlistitem.unreadSingular": "{count} New Message",
   "app.userlist.chatlistitem.unreadPlural": "{count} New Messages",
   "app.chat.Label": "Chat",
+  "app.chat.emptyLogLabel": "Chat log empty",
   "app.media.Label": "Media",
   "app.presentation.presentationToolbar.prevSlideLabel": "Previous slide",
   "app.presentation.presentationToolbar.prevSlideDescrip": "Change the presentation to the previous slide",