From a4fcffaa9a91b9118be30f0ada882102c82de53f Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 19 Apr 2017 08:28:13 -0700
Subject: [PATCH 1/4] add DropdownListTitle component

---
 .../ui/components/dropdown/list/styles.scss   |  4 +++
 .../dropdown/list/title/component.jsx         | 26 +++++++++++++++++++
 .../user-list/user-list-item/component.jsx    | 24 ++++++++---------
 bigbluebutton-html5/private/locales/en.json   |  1 +
 4 files changed, 42 insertions(+), 13 deletions(-)
 mode change 100644 => 100755 bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
 create mode 100755 bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx

diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
old mode 100644
new mode 100755
index 927b5bec11..b96c3a0bc2
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
@@ -17,6 +17,10 @@
   }
 }
 
+.actionsHeader {
+  color: $color-gray;
+  font-weight: 600;
+}
 
 .separator {
   display: flex;
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
new file mode 100755
index 0000000000..2f1642a892
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import styles from '../styles';
+
+const intlMessages = defineMessages({
+  titleContextLabel: {
+    id: 'app.dropdown.list.titleContextLabel',
+    description: 'adds context to dropdown list title',
+  },
+});
+
+class DropdownListTitle extends Component {
+
+  render() {
+    const { label, intl } = this.props;
+
+    return (
+      <div>
+        <li className={styles.actionsHeader} aria-labelledby="labelContext">{label}</li>
+        <div id="labelContext" aria-label={intl.formatMessage(intlMessages.titleContextLabel)}></div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(DropdownListTitle);
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
index 7aef7ff4e5..6e6f5fb2b6 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
+++ b/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,
@@ -163,7 +164,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 +175,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 +185,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 +231,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>
@@ -277,13 +280,8 @@ class UserListItem extends Component {
 
           <DropdownList>
             {
-              [
-                (<DropdownListItem
-                  className={styles.actionsHeader}
-                  key={_.uniqueId('action-header')}
-                  label={user.name}
-                  style={{ fontWeight: 600 }}
-                  defaultMessage={user.name} />),
+              [
+                (<DropdownListTitle label={user.name} />),
                 (<DropdownListSeparator key={_.uniqueId('action-separator')} />),
               ].concat(actions)
             }
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 6297a5737d..1bedca4844 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -15,6 +15,7 @@
   "app.chat.closeChatLabel": "Close {title}",
   "app.chat.hideChatLabel": "Hide {title}",
   "app.chat.moreMessages": "More messages below",
+  "app.dropdown.list.titleContextLabel": "available options",
   "app.userlist.chatlistitem.unreadSingular": "{count} New Message",
   "app.userlist.chatlistitem.unreadPlural": "{count} New Messages",
   "app.chat.Label": "Chat",

From cc04f96955ee536e96cd1fd4edfdd7294c9fbb50 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 19 Apr 2017 10:10:17 -0700
Subject: [PATCH 2/4] add suggested changes

---
 .../ui/components/dropdown/list/styles.scss   |  2 +-
 .../dropdown/list/title/component.jsx         | 20 ++++++++-----------
 .../user-list/user-list-item/component.jsx    | 10 +++++++++-
 bigbluebutton-html5/private/locales/en.json   |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
index b96c3a0bc2..7ca620aa3a 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
@@ -17,7 +17,7 @@
   }
 }
 
-.actionsHeader {
+.title {
   color: $color-gray;
   font-weight: 600;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
index 2f1642a892..d88875b396 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
@@ -1,26 +1,22 @@
 import React, { Component, PropTypes } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
 import styles from '../styles';
 
-const intlMessages = defineMessages({
-  titleContextLabel: {
-    id: 'app.dropdown.list.titleContextLabel',
-    description: 'adds context to dropdown list title',
-  },
-});
+const propTypes = {
+  description: PropTypes.string,
+};
 
-class DropdownListTitle extends Component {
+export default class DropdownListTitle extends Component {
 
   render() {
-    const { label, intl } = this.props;
+    const { intl, description } = this.props;
 
     return (
       <div>
-        <li className={styles.actionsHeader} aria-labelledby="labelContext">{label}</li>
-        <div id="labelContext" aria-label={intl.formatMessage(intlMessages.titleContextLabel)}></div>
+        <li className={styles.title} aria-labelledby="labelContext">{this.props.children}</li>
+        <div id="labelContext" aria-label={description}></div>
       </div>
     );
   }
 }
 
-export default injectIntl(DropdownListTitle);
+DropdownListTitle.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
index 6e6f5fb2b6..d3c9949ede 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
@@ -46,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 = {
@@ -243,6 +247,7 @@ class UserListItem extends Component {
   renderUserContents() {
     const {
       user,
+      intl,
     } = this.props;
 
     let actions = this.getAvailableActions();
@@ -281,7 +286,10 @@ class UserListItem extends Component {
           <DropdownList>
             {
               [
-                (<DropdownListTitle label={user.name} />),
+                (<DropdownListTitle
+                    description={intl.formatMessage(messages.menuTitleContext)}>
+                      {user.name}
+                 </DropdownListTitle>),
                 (<DropdownListSeparator key={_.uniqueId('action-separator')} />),
               ].concat(actions)
             }
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 1bedca4844..d64004cdaf 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -15,7 +15,7 @@
   "app.chat.closeChatLabel": "Close {title}",
   "app.chat.hideChatLabel": "Hide {title}",
   "app.chat.moreMessages": "More messages below",
-  "app.dropdown.list.titleContextLabel": "available options",
+  "app.userlist.menuTitleContext": "available options",
   "app.userlist.chatlistitem.unreadSingular": "{count} New Message",
   "app.userlist.chatlistitem.unreadPlural": "{count} New Messages",
   "app.chat.Label": "Chat",

From 5fa9ae9bf13b0ebb38022fc3c9c0ff5a3d8dfd9c Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 19 Apr 2017 10:27:45 -0700
Subject: [PATCH 3/4] change aria-labelledby to aria-describedby

---
 .../imports/ui/components/dropdown/list/title/component.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
index d88875b396..716c228967 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
@@ -12,7 +12,7 @@ export default class DropdownListTitle extends Component {
 
     return (
       <div>
-        <li className={styles.title} aria-labelledby="labelContext">{this.props.children}</li>
+        <li className={styles.title} aria-describedby="labelContext">{this.props.children}</li>
         <div id="labelContext" aria-label={description}></div>
       </div>
     );

From 97402b4628a56814cb5ebf68a9221bab4c662e8b Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Thu, 20 Apr 2017 06:53:03 -0700
Subject: [PATCH 4/4] add aria-label to chat log

---
 .../imports/ui/components/chat/component.jsx    |  4 ++--
 .../components/chat/message-list/component.jsx  | 17 +++++++++++------
 bigbluebutton-html5/private/locales/en.json     |  1 +
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/chat/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/component.jsx
index 9fc7be251a..97e6e638e4 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/component.jsx
+++ b/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>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
index a860cdc1e5..7cd0b084a0 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
+++ b/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"
-          aria-live="polite"
-          aria-relevant="additions"
+          tabIndex="0"
           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
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index d64004cdaf..6b3906b682 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -19,6 +19,7 @@
   "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",