Merge pull request #3849 from KDSBrowne/accessibility-06-update

[HTML5] - Accessibility 06 update
2017-04-26 11:09:50 -04:00 · 2017-04-26 11:09:50 -04:00 · 7eba006345
commit 7eba006345
parent c2b6f48b87 230bc1f11c
13 changed files with 283 additions and 109 deletions
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx
@ -5,10 +5,10 @@ import styles from '../styles.scss';
 export default class MuteAudio extends React.Component {

  render() {
-    const { isInAudio, isMuted, callback, isTalking} = this.props;
+    const { isInAudio, isMuted, callback, isTalking, } = this.props;

    if (!isInAudio) return null;
-    
+
    let label = !isMuted ? 'Mute' : 'Unmute';
    let icon = !isMuted ? 'unmute' : 'mute';
    let tabIndex = !isInAudio ? -1 : 0;
--- a/bigbluebutton-html5/imports/ui/components/checkbox/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/checkbox/component.jsx
@ -17,19 +17,26 @@ export default class Checkbox extends Component {
  }

  render() {
+
+    const { ariaLabel, ariaLabelledBy, ariaDesc, ariaDescribedBy, } = this.props;
+
    return (
      <div className={styles.container}>
        <input
          type='checkbox'
          onChange={this.handleChange}
          checked={this.props.checked}
-          className={styles.input}/>
+          className={styles.input}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}/>
        <div onClick={this.handleChange}>
          { this.props.checked ?
            <Icon iconName='check' className={cx(styles.icon, styles.checked)}/> :
            <Icon iconName='circle' className={styles.icon}/>
          }
        </div>
+        <div id={ariaLabelledBy} hidden>{ariaLabel}</div>
+        <div id={ariaDescribedBy} hidden>{ariaDesc}</div>
      </div>
    );
  }
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
@ -19,7 +19,7 @@ export default class DropdownListItem extends Component {

  renderDefault() {
    let children = [];
-    const { icon, label } = this.props;
+    const { icon, label, } = this.props;

    return [
      (icon ? <Icon iconName={icon} key="icon" className={styles.itemIcon}/> : null),
@ -29,7 +29,7 @@ export default class DropdownListItem extends Component {

  render() {
    const { label, description, children, injectRef, tabIndex, onClick, onKeyDown,
-      className, style, separator, intl} = this.props;
+      className, style, separator, intl, } = this.props;

    return (
      <li
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@ -15,7 +15,6 @@ import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import { defineMessages, injectIntl } from 'react-intl';

-
 const intlMessages = defineMessages({
  toggleUserListLabel: {
    id: 'app.navBar.userListToggleBtnLabel',
@ -23,7 +22,7 @@ const intlMessages = defineMessages({
  },
  newMessages: {
    id: 'app.navbar.toggleUserList.newMessages',
-    description: 'label for toggleUserList btn when showing red notification'
+    description: 'label for toggleUserList btn when showing red notification',
  },
 });

@ -77,8 +76,6 @@ class NavBar extends Component {
    toggleBtnClasses[styles.btn] = true;
    toggleBtnClasses[styles.btnWithNotificationDot] = hasUnreadMessages;

-
-
    return (
      <div className={styles.navbar}>
        <div className={styles.left}>
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
@ -15,9 +15,9 @@ export default class SettingsDropdownContainer extends Component {

  componentDidMount() {
    const fullscreenChangedEvents = ['fullscreenchange',
-                                     'webkitfullscreenchange',
-                                     'mozfullscreenchange',
-                                     'MSFullscreenChange', ];
+                                    'webkitfullscreenchange',
+                                    'mozfullscreenchange',
+                                    'MSFullscreenChange',];

    fullscreenChangedEvents.forEach(event =>
      document.addEventListener(event, this.handleFullscreenChange));
@ -25,9 +25,9 @@ export default class SettingsDropdownContainer extends Component {

  componentWillUnmount() {
    const fullscreenChangedEvents = ['fullscreenchange',
-                                     'webkitfullscreenchange',
-                                     'mozfullscreenchange',
-                                     'MSFullscreenChange', ];
+                                    'webkitfullscreenchange',
+                                    'mozfullscreenchange',
+                                    'MSFullscreenChange',];

    fullscreenChangedEvents.forEach(event =>
      document.removeEventListener(event, this.fullScreenToggleCallback));
--- a/bigbluebutton-html5/imports/ui/components/polling/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
@ -1,8 +1,16 @@
 import React from 'react';
 import Button from '/imports/ui/components/button/component';
 import styles from './styles.scss';
+import { defineMessages, injectIntl } from 'react-intl';

-export default class PollingComponent extends React.Component {
+const intlMessages = defineMessages({
+  pollingTitleLabel: {
+    id: 'app.polling.pollingTitle',
+    description: 'Title label for polling options',
+  },
+});
+
+class PollingComponent extends React.Component {
  constructor(props) {
    super(props);
  }
@ -22,12 +30,13 @@ export default class PollingComponent extends React.Component {
  render() {
    const poll = this.props.poll;
    const calculatedStyles = this.getStyles();
+    const { intl } = this.props;

    return (
      <div className={styles.pollingContainer}>
        <div className={styles.pollingTitle}>
          <p>
-          Polling Options
+            {intl.formatMessage(intlMessages.pollingTitleLabel)}
          </p>
        </div>
        {poll.answers.map((pollAnswer, index) =>
@ -63,3 +72,5 @@ export default class PollingComponent extends React.Component {
    );
  }
 };
+
+export default injectIntl(PollingComponent);
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
@ -11,7 +11,7 @@ const intlMessages = defineMessages({
  },
  nextSlideLabel: {
    id: 'app.presentation.presentationToolbar.nextSlideLabel',
-    description: 'Next slide button label'
+    description: 'Next slide button label',
  },
 });

--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
@ -45,6 +45,22 @@ const intlMessages = defineMessages({
    id: 'app.submenu.application.decreaseFontBtnDesc',
    description: 'adds descriptive context to decrease font size button',
  },
+  languageLabel: {
+    id: 'app.submenu.application.languageLabel',
+    description: 'displayed label for changing application locale',
+  },
+  ariaLanguageLabel: {
+    id: 'app.submenu.application.ariaLanguageLabel',
+    description: 'aria label for locale change section',
+  },
+  languageOptionLabel:  {
+    id: 'app.submenu.application.languageOptionLabel',
+    description: 'default change language option when locales are available',
+  },
+  noLocaleOptionLabel: {
+    id: 'app.submenu.application.noLocaleOptionLabel',
+    description: 'default change language option when no locales available',
+  },
 });

 class ApplicationMenu extends BaseMenu {
@ -113,7 +129,7 @@ class ApplicationMenu extends BaseMenu {
        </div>
        <div className={styles.form}>
          <div className={styles.row}>
-            <div className={styles.col}>
+            <div className={styles.col} aria-hidden="true">
              <div className={styles.formElement}>
                <label className={styles.label}>
                  {intl.formatMessage(intlMessages.audioNotifyLabel)}
@ -121,19 +137,19 @@ class ApplicationMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div
-                className={cx(styles.formElement, styles.pullContentRight)}
-                aria-label={intl.formatMessage(intlMessages.audioNotifyLabel)}>
-              <Toggle
-                icons={false}
-                defaultChecked={this.state.settings.chatAudioNotifications}
-                onChange={() => this.handleToggle('chatAudioNotifications')} />
+              <div className={cx(styles.formElement, styles.pullContentRight)}>
+                <Toggle
+                  icons={false}
+                  defaultChecked={this.state.settings.chatAudioNotifications}
+                  onChange={() => this.handleToggle('chatAudioNotifications')}
+                  ariaLabelledBy={'audioNotify'}
+                  ariaLabel={intl.formatMessage(intlMessages.audioNotifyLabel)} />
              </div>
            </div>
          </div>
          <div className={styles.row}>
            <div className={styles.col}>
-              <div className={styles.formElement}>
+              <div className={styles.formElement} >
                <label className={styles.label}>
                  {intl.formatMessage(intlMessages.pushNotifyLabel)}
                </label>
@ -141,10 +157,12 @@ class ApplicationMenu extends BaseMenu {
            </div>
            <div className={styles.col}>
              <div className={cx(styles.formElement, styles.pullContentRight)}>
-              <Toggle
-                icons={false}
-                defaultChecked={this.state.settings.chatPushNotifications}
-                onChange={() => this.handleToggle('chatPushNotifications')}/>
+                <Toggle
+                  icons={false}
+                  defaultChecked={this.state.settings.chatPushNotifications}
+                  onChange={() => this.handleToggle('chatPushNotifications')}
+                  ariaLabelledBy={'pushNotify'}
+                  ariaLabel={intl.formatMessage(intlMessages.pushNotifyLabel)}/>
              </div>
            </div>
          </div>
@ -152,12 +170,13 @@ class ApplicationMenu extends BaseMenu {
            <div className={styles.col}>
              <div className={styles.formElement}>
                <label className={styles.label}>
-                  Application Language
+                  {intl.formatMessage(intlMessages.languageLabel)}
                </label>
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
+              <div className={cx(styles.formElement, styles.pullContentRight)}
+              aria-labelledby="changeLangLabel">
                <select
                  defaultValue={this.state.settings.locale}
                  className={styles.select}
@ -165,8 +184,8 @@ class ApplicationMenu extends BaseMenu {
                  <option>
                    { availableLocales &&
                      availableLocales.length ?
-                      'Choose language' :
-                      'No active locales' }
+                      intl.formatMessage(intlMessages.languageOptionLabel) :
+                      intl.formatMessage(intlMessages.noLocaleOptionLabel) }
                  </option>
                {availableLocales ? availableLocales.map((locale, index) =>
                  <option key={index} value={locale.locale}>
@ -175,6 +194,7 @@ class ApplicationMenu extends BaseMenu {
                ) : null }
                </select>
              </div>
+              <div id="changeLangLabel" aria-label={intl.formatMessage(intlMessages.ariaLanguageLabel)}></div>
            </div>
          </div>
          <hr className={styles.separator}/>
@ -202,12 +222,9 @@ class ApplicationMenu extends BaseMenu {
                      color={'success'}
                      icon={'add'}
                      circle={true}
-                      tabIndex='0'
                      hideLabel={true}
                      label={intl.formatMessage(intlMessages.increaseFontBtnLabel)}
-                      aria-describedby={''}
                    />
-                    <div id='sizeUpLabel' hidden>Font size up</div>
                  </div>
                  <div className={styles.col}>
                    <Button
@ -215,10 +232,8 @@ class ApplicationMenu extends BaseMenu {
                      color={'success'}
                      icon={'substract'}
                      circle={true}
-                      tabIndex='0'
                      hideLabel={true}
                      label={intl.formatMessage(intlMessages.decreaseFontBtnLabel)}
-                      aria-describedby={''}
                    />
                  </div>
                </div>
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx
@ -145,11 +145,13 @@ class ClosedCaptionsMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
+              <div className={cx(styles.formElement, styles.pullContentRight)} >
              <Toggle
                icons={false}
                defaultChecked={this.state.settings.enabled}
-                onChange={() => this.handleToggle('enabled')} />
+                onChange={() => this.handleToggle('enabled')}
+                ariaLabelledBy={'closedCaptions'}
+                ariaLabel={intl.formatMessage(intlMessages.closedCaptionsLabel)} />
              </div>
            </div>
          </div>
@ -165,7 +167,9 @@ class ClosedCaptionsMenu extends BaseMenu {
              <div className={cx(styles.formElement, styles.pullContentRight)}>
                <Checkbox
                  onChange={() => this.handleToggle('takeOwnership')}
-                  checked={this.state.settings.takeOwnership}/>
+                  checked={this.state.settings.takeOwnership}
+                  ariaLabelledBy={'takeOwnership'}
+                  ariaLabel={intl.formatMessage(intlMessages.takeOwnershipLabel)}/>
              </div>
            </div>
          </div>
@ -178,7 +182,9 @@ class ClosedCaptionsMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
+              <div
+                className={cx(styles.formElement, styles.pullContentRight)}
+                aria-label={intl.formatMessage(intlMessages.languageLabel)}>
                <select
                  defaultValue={locales ? locales.indexOf(this.state.settings.locale) : -1}
                  className={styles.select}
@ -208,12 +214,16 @@ class ClosedCaptionsMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
+              <div
+                className={cx(styles.formElement, styles.pullContentRight)}
+                aria-label={intl.formatMessage(intlMessages.fontFamilyLabel)}>
                <select
                  defaultValue={FONT_FAMILIES.indexOf(this.state.settings.fontFamily)}
                  onChange={this.handleSelectChange.bind(this, 'fontFamily', FONT_FAMILIES)}
                  className={styles.select}>
-                  <option value='-1' disabled>{intl.formatMessage(intlMessages.fontFamilyOptionLabel)}</option>
+                  <option value='-1' disabled>
+                    {intl.formatMessage(intlMessages.fontFamilyOptionLabel)}
+                  </option>
                  {
                    FONT_FAMILIES.map((family, index) =>
                      <option key={index} value={index}>
@ -235,20 +245,24 @@ class ClosedCaptionsMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
-                <select
-                  defaultValue={FONT_SIZES.indexOf(this.state.settings.fontSize)}
-                  onChange={this.handleSelectChange.bind(this, 'fontSize', FONT_SIZES)}
-                  className={styles.select}>
-                  <option value='-1' disabled>{intl.formatMessage(intlMessages.fontSizeOptionLabel)}</option>
-                  {
-                    FONT_SIZES.map((size, index) =>
-                      <option key={index} value={index}>
-                        {size}
-                      </option>
-                    )
-                  }
-                </select>
+              <div
+                className={cx(styles.formElement, styles.pullContentRight)}
+                aria-label={intl.formatMessage(intlMessages.fontSizeLabel)}>
+                  <select
+                    defaultValue={FONT_SIZES.indexOf(this.state.settings.fontSize)}
+                    onChange={this.handleSelectChange.bind(this, 'fontSize', FONT_SIZES)}
+                    className={styles.select}>
+                    <option value='-1' disabled>
+                      {intl.formatMessage(intlMessages.fontSizeOptionLabel)}
+                    </option>
+                    {
+                      FONT_SIZES.map((size, index) =>
+                        <option key={index} value={index}>
+                          {size}
+                        </option>
+                      )
+                    }
+                  </select>
              </div>
            </div>
          </div>
@ -262,23 +276,23 @@ class ClosedCaptionsMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
              <div
-                tabIndex='12'
-                className={ styles.swatch }
-                onClick={ this.handleColorPickerClick.bind(this, 'displayBackgroundColorPicker') }>
+                className={cx(styles.formElement, styles.pullContentRight)}
+                aria-label={intl.formatMessage(intlMessages.backgroundColorLabel)}>
                <div
-                  className={styles.swatchInner}
-                  style={ { background: this.state.settings.backgroundColor } }>
+                  tabIndex='12'
+                  className={ styles.swatch }
+                  onClick={ this.handleColorPickerClick.bind(this, 'displayBackgroundColorPicker') }>
+                  <div
+                    className={styles.swatchInner}
+                    style={ { background: this.state.settings.backgroundColor } }>
+                  </div>
                </div>
-
-              </div>
                { this.state.displayBackgroundColorPicker ?
                  <div className={styles.colorPickerPopover}>
                    <div
                      className={styles.colorPickerOverlay}
-                      onClick={ this.handleCloseColorPicker.bind(this) }
-                    >
+                      onClick={ this.handleCloseColorPicker.bind(this) }>
                    </div>
                    <GithubPicker
                      onChange={this.handleColorChange.bind(this, 'backgroundColor')}
@ -302,17 +316,18 @@ class ClosedCaptionsMenu extends BaseMenu {
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
              <div
-                tabIndex='12'
-                className={ styles.swatch }
-                onClick={ this.handleColorPickerClick.bind(this, 'displayFontColorPicker') }>
+                className={cx(styles.formElement, styles.pullContentRight)}
+                aria-label={intl.formatMessage(intlMessages.fontColorLabel)}>
                <div
-                  className={styles.swatchInner}
-                  style={ { background: this.state.settings.fontColor } }>
+                  tabIndex='12'
+                  className={ styles.swatch }
+                  onClick={ this.handleColorPickerClick.bind(this, 'displayFontColorPicker') }>
+                  <div
+                    className={styles.swatchInner}
+                    style={ { background: this.state.settings.fontColor } }>
+                  </div>
                </div>
-
-              </div>
                { this.state.displayFontColorPicker ?
                  <div className={styles.colorPickerPopover}>
                    <div
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/participants/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/participants/component.jsx
@ -8,8 +8,88 @@ import cx from 'classnames';
 import styles from '../styles.scss';
 import Toggle from '/imports/ui/components/switch/component';
 import Checkbox from '/imports/ui/components/checkbox/component';
+import { defineMessages, injectIntl } from 'react-intl';

-export default class ApplicationMenu extends BaseMenu {
+const intlMessages = defineMessages({
+  participantsTitle: {
+    id: 'app.userlist.participantsTitle',
+    description: 'heading label for participants submenu',
+  },
+  muteAllLabel: {
+    id: 'app.submenu.participants.muteAllLabel',
+    description: 'label for participants submenu mute section',
+  },
+  lockAllLabel: {
+    id: 'app.submenu.participants.lockAllLabel',
+    description: 'label for participants submenu lock section',
+  },
+  lockItemLabel: {
+    id: 'app.submenu.participants.lockItemLabel',
+    description: 'label for locking option',
+  },
+  lockCamDesc: {
+    id: 'app.submenu.participants.lockCamDesc',
+    description: 'lock webcam description',
+  },
+  lockMicDesc: {
+    id: 'app.submenu.participants.lockMicDesc',
+    description: 'lock Mic description',
+  },
+  lockPublicChatDesc: {
+    id: 'app.submenu.participants.lockPublicChatDesc',
+    description: 'lock public chat description',
+  },
+  lockPrivateChatDesc: {
+    id: 'app.submenu.participants.lockPrivateChatDesc',
+    description: 'lock private chat description',
+  },
+  lockLayoutDesc: {
+    id: 'app.submenu.participants.lockLayoutDesc',
+    description: 'lock layout description',
+  },
+  lockMicAriaLabel: {
+    id: 'app.submenu.participants.lockMicAriaLabel',
+    description: 'lock mic aria lable ',
+  },
+  lockCamAriaLabel: {
+    id: 'app.submenu.participants.lockCamAriaLabel',
+    description: 'lock webcam aria label',
+  },
+  lockPublicChatAriaLabel: {
+    id: 'app.submenu.participants.lockPublicChatAriaLabel',
+    description: 'lock public chat aria label',
+  },
+  lockPrivateChatAriaLabel: {
+    id: 'app.submenu.participants.lockPrivateChatAriaLabel',
+    description: 'lock private chat aria label',
+  },
+  lockLayoutAriaLabel: {
+    id: 'app.submenu.participants.lockLayoutAriaLabel',
+    description: 'lock layout aria label',
+  },
+  lockMicLabel: {
+    id: 'app.submenu.participants.lockMicLabel',
+    description: 'lock mic visible label',
+  },
+  lockCamLabel: {
+    id: 'app.submenu.participants.lockCamLabel',
+    description: 'lock webcam visible label',
+  },
+  lockPublicChatLabel: {
+    id: 'app.submenu.participants.lockPublicChatLabel',
+    description: 'lock public chat visible label',
+  },
+  lockPrivateChatLabel: {
+    id: 'app.submenu.participants.lockPrivateChatLabel',
+    description: 'lock private chat visible label',
+  },
+  lockLayoutLabel: {
+    id: 'app.submenu.participants.lockLayoutLabel',
+    description: 'lock layout visible lable',
+  },
+});
+
+class ApplicationMenu extends BaseMenu {
  constructor(props) {
    super(props);

@ -21,71 +101,81 @@ export default class ApplicationMenu extends BaseMenu {
  }

  getLockItems() {
+
+    const { intl } = this.props;
+
    return [
      {
        key: 'webcam',
-        label: 'Webcam',
+        label: intl.formatMessage(intlMessages.lockCamLabel),
        ariaLabelledBy: 'webcamLabel',
        ariaDescribedBy: 'webcamDesc',
-        ariaLabel: 'Webcam lock',
-        ariaDesc: 'Disables the webcam for all locked participants.',
+        ariaLabel: intl.formatMessage(intlMessages.lockCamAriaLabel),
+        ariaDesc: intl.formatMessage(intlMessages.lockCamDesc),
      },
      {
        key: 'microphone',
-        label: 'Microphone',
+        label: intl.formatMessage(intlMessages.lockMicLabel),
        ariaLabelledBy: 'micLabel',
        ariaDescribedBy: 'micDesc',
-        ariaLabel: 'Microphone lock',
-        ariaDesc: 'Disables the microphone for all locked participants.',
+        ariaLabel: intl.formatMessage(intlMessages.lockMicAriaLabel),
+        ariaDesc: intl.formatMessage(intlMessages.lockMicDesc),
      },
      {
        key: 'publicChat',
        ariaLabelledBy: 'pubChatLabel',
        ariaDescribedBy: 'pubChatDesc',
-        ariaLabel: 'Public chat lock',
-        ariaDesc: 'Disables public chat for all locked participants.',
-        label: 'Public Chat',
+        ariaLabel: intl.formatMessage(intlMessages.lockPublicChatAriaLabel),
+        ariaDesc: intl.formatMessage(intlMessages.lockPublicChatDesc),
+        label: intl.formatMessage(intlMessages.lockPublicChatLabel),
      },
      {
        key: 'privateChat',
-        label: 'Private Chat',
+        label: intl.formatMessage(intlMessages.lockPrivateChatLabel),
        ariaLabelledBy: 'privChatLabel',
        ariaDescribedBy: 'privChatDesc',
-        ariaLabel: 'Private chat lock',
-        ariaDesc: 'Disables private chat for all locked participants.',
+        ariaLabel: intl.formatMessage(intlMessages.lockPrivateChatAriaLabel),
+        ariaDesc: intl.formatMessage(intlMessages.lockPrivateChatDesc),
      },
      {
        key: 'layout',
        ariaLabelledBy: 'layoutLabel',
        ariaDescribedBy: 'layoutDesc',
-        ariaLabel: 'Layout lock',
-        ariaDesc: 'Locks layout for all locked participants.',
-        label: 'Layout',
+        ariaLabel: intl.formatMessage(intlMessages.lockLayoutAriaLabel),
+        ariaDesc: intl.formatMessage(intlMessages.lockLayoutDesc),
+        label: intl.formatMessage(intlMessages.lockLayoutLabel),
      },
    ];
  }

  render() {
+
+    const { intl } = this.props;
+
    return (
      <div className={styles.tabContent}>
        <div className={styles.header}>
-          <h3 className={styles.title}>Participants</h3>
+          <h3 className={styles.title}>{intl.formatMessage(intlMessages.participantsTitle)}</h3>
        </div>
        <div className={styles.form}>
          <div className={styles.row}>
            <div className={styles.col}>
              <div className={styles.formElement}>
                <label className={styles.label}>
-                  Mute all except the presenter
+                  {intl.formatMessage(intlMessages.muteAllLabel)}
                </label>
              </div>
            </div>
            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
+              <div
+                className={cx(styles.formElement, styles.pullContentRight)}>
              <Toggle
                icons={false}
                defaultChecked={this.state.settings.muteAll}
-                onChange={() => this.handleToggle('muteAll')} />
+                onChange={() => this.handleToggle('muteAll')}
+                ariaLabelledBy={'muteLabel'}
+                ariaLabel={intl.formatMessage(intlMessages.muteAllLabel)}
+                />
              </div>
            </div>
          </div>
@ -93,7 +183,7 @@ export default class ApplicationMenu extends BaseMenu {
            <div className={styles.col}>
              <div className={styles.formElement}>
                <label className={styles.label}>
-                  Lock all participants
+                  {intl.formatMessage(intlMessages.lockAllLabel)}
                </label>
              </div>
            </div>
@ -103,6 +193,8 @@ export default class ApplicationMenu extends BaseMenu {
                icons={false}
                defaultChecked={this.state.settings.lockAll}
                onChange={() => this.handleToggle('lockAll')}
+                ariaLabelledBy={'lockLabel'}
+                ariaLabel={intl.formatMessage(intlMessages.lockAllLabel)}
                 />
              </div>
            </div>
@ -114,6 +206,7 @@ export default class ApplicationMenu extends BaseMenu {
  }

  renderLockItem({ label, key, ariaLabel, ariaLabelledBy, ariaDesc, ariaDescribedBy }, i) {
+
    return (
      <div key={i} className={cx(styles.row, styles.spacedLeft)}>
        <div className={styles.col}>
@ -124,7 +217,8 @@ export default class ApplicationMenu extends BaseMenu {
          </div>
        </div>
        <div className={styles.col}>
-          <div className={cx(styles.formElement, styles.pullContentRight)}>
+          <div
+            className={cx(styles.formElement, styles.pullContentRight)}>
            <Checkbox
              onChange={() => this.handleToggle(key)}
              checked={this.state.settings[key]}
@ -139,3 +233,5 @@ export default class ApplicationMenu extends BaseMenu {
    );
  }
 };
+
+export default injectIntl(ApplicationMenu);
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/video/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/video/component.jsx
@ -54,26 +54,34 @@ class VideoMenu extends BaseMenu {
        <div className={styles.form}>
          <div className={styles.row}>
            <div className={styles.col}>
-              <div className={styles.formElement}>
+              <div
+                className={styles.formElement}
+                aria-label={intl.formatMessage(intlMessages.videoSourceLabel)}>
                <label className={cx(styles.label, styles.labelSmall)}>
                  {intl.formatMessage(intlMessages.videoSourceLabel)}
                </label>
                <select
                  defaultValue='-1'
                  className={styles.select}>
-                  <option value='-1' disabled>{intl.formatMessage(intlMessages.videoOptionLabel)}</option>
+                  <option value='-1' disabled>
+                    {intl.formatMessage(intlMessages.videoOptionLabel)}
+                  </option>
                </select>
              </div>
            </div>
            <div className={styles.col}>
-              <div className={styles.formElement}>
+              <div
+                className={styles.formElement}
+                aria-label={intl.formatMessage(intlMessages.videoQualityLabel)}>
                <label className={cx(styles.label, styles.labelSmall)}>
                  {intl.formatMessage(intlMessages.videoQualityLabel)}
                </label>
                <select
                  defaultValue='-1'
                  className={styles.select}>
-                  <option value='-1' disabled>{intl.formatMessage(intlMessages.qualityOptionLabel)}</option>
+                  <option value='-1' disabled>
+                    {intl.formatMessage(intlMessages.qualityOptionLabel)}
+                  </option>
                </select>
              </div>
            </div>
@ -91,7 +99,9 @@ class VideoMenu extends BaseMenu {
              <Toggle
                icons={false}
                defaultChecked={this.state.viewParticipantsWebcams}
-                onChange={() => this.handleToggle('viewParticipantsWebcams')} />
+                onChange={() => this.handleToggle('viewParticipantsWebcams')}
+                ariaLabelledBy={'viewCamLabel'}
+                ariaLabel={intl.formatMessage(intlMessages.participantsCamLabel)} />
              </div>
            </div>
          </div>
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx
@ -14,11 +14,11 @@ const intlMessages = defineMessages({
  },
  unreadPlural: {
    id: 'app.userlist.chatlistitem.unreadPlural',
-    description: 'singular aria label for new message'
+    description: 'singular aria label for new message',
  },
  unreadSingular: {
    id: 'app.userlist.chatlistitem.unreadSingular',
-    description: 'plural aria label for new messages'
+    description: 'plural aria label for new messages',
  },
 });

--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@ -33,6 +33,7 @@
  "app.presentation.presentationToolbar.fitScreenDescrip": "Display the whole slide",
  "app.presentation.presentationToolbar.zoomLabel": "Zoom",
  "app.presentation.presentationToolbar.zoomDescrip": "Change the zoom level of the presentation",
+  "app.polling.pollingTitle": "Polling Options",
  "app.failedMessage": "Apologies, trouble connecting to the server.",
  "app.connectingMessage": "Connecting...",
  "app.waitingMessage": "Disconnected. Trying to reconnect in {seconds} seconds...",
@ -71,8 +72,12 @@
  "app.submenu.application.audioNotifyLabel": "Audio notifications for chat",
  "app.submenu.application.pushNotifyLabel": "Push notifications for chat",
  "app.submenu.application.fontSizeControlLabel": "Font size",
-  "app.submenu.application.increaseFontBtnLabel": "Increase Font Size",
-  "app.submenu.application.decreaseFontBtnLabel": "Decrease Font Size",
+  "app.submenu.application.increaseFontBtnLabel": "Increase Application Font Size",
+  "app.submenu.application.decreaseFontBtnLabel": "Decrease Application Font Size",
+  "app.submenu.application.languageLabel": "Application Language",
+  "app.submenu.application.ariaLanguageLabel": "Change Application Language",
+  "app.submenu.application.languageOptionLabel": "Choose language",
+  "app.submenu.application.noLocaleOptionLabel": "No active locales",
  "app.submenu.audio.micSourceLabel": "Microphone source",
  "app.submenu.audio.speakerSourceLabel": "Speaker source",
  "app.submenu.audio.streamVolumeLabel": "Your audio stream volume",
@ -93,6 +98,24 @@
  "app.submenu.closedCaptions.fontSizeOptionLabel": "Choose Font size",
  "app.submenu.closedCaptions.backgroundColorLabel": "Background color",
  "app.submenu.closedCaptions.fontColorLabel": "Font color",
+  "app.submenu.participants.muteAllLabel": "Mute all except the presenter",
+  "app.submenu.participants.lockAllLabel": "Lock all participants",
+  "app.submenu.participants.lockItemLabel": "Participants {lockItem}",
+  "app.submenu.participants.lockMicDesc": "Disables the microphone for all locked participants",
+  "app.submenu.participants.lockCamDesc": "Disables the webcam for all locked participants",
+  "app.submenu.participants.lockPublicChatDesc": "Disables public chat for all locked participants",
+  "app.submenu.participants.lockPrivateChatDesc": "Disables private chat for all locked participants",
+  "app.submenu.participants.lockLayoutDesc": "Locks layout for all locked participants",
+  "app.submenu.participants.lockMicAriaLabel": "Microphone lock",
+  "app.submenu.participants.lockCamAriaLabel": "Webcam lock",
+  "app.submenu.participants.lockPublicChatAriaLabel": "Public chat lock",
+  "app.submenu.participants.lockPrivateChatAriaLabel": "Private chat lock",
+  "app.submenu.participants.lockLayoutAriaLabel": "Layout lock",
+  "app.submenu.participants.lockMicLabel": "Microphone",
+  "app.submenu.participants.lockCamLabel": "Webcam",
+  "app.submenu.participants.lockPublicChatLabel": "Public Chat",
+  "app.submenu.participants.lockPrivateChatLabel": "Private Chat",
+  "app.submenu.participants.lockLayoutLabel": "Layout",
  "app.settings.applicationTab.label": "Application",
  "app.settings.audioTab.label": "Audio",
  "app.settings.videoTab.label": "Video",