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 e8a2d017ae..c0aa36eae2 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
@@ -54,13 +54,9 @@ const messages = defineMessages({
id: 'app.userlist.menuTitleContext',
description: 'adds context to userListItem menu title',
},
- userItemStatusAriaLabel: {
- id: 'app.userlist.useritem.status.arialabel',
- description: 'adds aria label for user and status',
- },
- userItemAriaLabel: {
- id: 'app.userlist.useritem.nostatus.arialabel',
- description: 'aria label for user',
+ userAriaLabel: {
+ id: 'app.userlist.userAriaLabel',
+ description: 'aria label for each user in the userlist',
},
});
@@ -97,6 +93,7 @@ class UserListItem extends Component {
this.handleScroll = this.handleScroll.bind(this);
this.onActionsShow = this.onActionsShow.bind(this);
this.onActionsHide = this.onActionsHide.bind(this);
+ this.getDropdownMenuParent = this.getDropdownMenuParent.bind(this);
}
handleScroll() {
@@ -153,6 +150,7 @@ class UserListItem extends Component {
* Check if the dropdown is visible, if so, check if should be draw on top or bottom direction.
*/
checkDropdownDirection() {
+
if (this.isDropdownActivedByUser()) {
const dropdown = findDOMNode(this.dropdown);
const dropdownTrigger = dropdown.children[0];
@@ -174,7 +172,7 @@ class UserListItem extends Component {
nextState.dropdownOffset = window.innerHeight - offsetPageTop;
nextState.dropdownDirection = 'bottom';
}
-
+
this.setState(nextState);
}
}
@@ -186,6 +184,17 @@ class UserListItem extends Component {
*/
isDropdownActivedByUser() {
const { isActionsOpen, dropdownVisible } = this.state;
+ const list = findDOMNode(this.list);
+
+ if (isActionsOpen, dropdownVisible) {
+ for (let i = 0; i < list.children.length; i++) {
+ if (list.children[i].getAttribute('role') === 'menuitem') {
+ list.children[i].focus();
+ break;
+ }
+ }
+ }
+
return isActionsOpen && !dropdownVisible;
}
@@ -215,6 +224,10 @@ class UserListItem extends Component {
scrollContainer.addEventListener('scroll', this.handleScroll, false);
}
+ getDropdownMenuParent() {
+ return findDOMNode(this.dropdown);
+ }
+
onActionsHide() {
this.setState({
isActionsOpen: false,
@@ -238,23 +251,20 @@ class UserListItem extends Component {
intl,
} = this.props;
- const you = (user.isCurrent) ? intl.formatMessage(messages.you) : null;
+ let you = (user.isCurrent) ? intl.formatMessage(messages.you) : '';
const presenter = (user.isPresenter)
? intl.formatMessage(messages.presenter)
- : null;
+ : '';
- const userAriaLabel = (user.emoji.status === 'none')
- ? intl.formatMessage(messages.userItemAriaLabel,
- { username: user.name, presenter, you })
- : intl.formatMessage(messages.userItemStatusAriaLabel,
- { username: user.name,
- presenter,
- you,
- status: user.emoji.status });
-
- const actions = this.getAvailableActions();
- const contents = (
+ const userAriaLabel = intl.formatMessage(messages.userAriaLabel,
+ { 0: user.name,
+ 1: presenter,
+ 2: you,
+ 3: user.emoji.status });
+
+ let actions = this.getAvailableActions();
+ let contents = (
+ aria-haspopup="true"
+ aria-live="assertive"
+ aria-relevant="additions">
{contents}
@@ -297,7 +306,10 @@ class UserListItem extends Component {
placement={`right ${dropdownDirection}`}
>
-
+ { this.list = ref; }}
+ getDropdownMenuParent={this.getDropdownMenuParent}
+ onActionsHide={this.onActionsHide}>
{
[
(