add modal title to dismiss / confirm modal btns for screen reader

bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { withModalMounter } from '/imports/ui/components/modal/service';
-
-import ModalBase from '/imports/ui/components/modal/base/component';
+import Modal from '/imports/ui/components/modal/simple/component';
 import Button from '/imports/ui/components/button/component';
 
 import { defineMessages, injectIntl } from 'react-intl';
@@ -93,22 +92,15 @@ class ExternalVideoModal extends Component {
     const startDisabled = !isUrlValid(url) || (getUrlFromVideoId(videoId) === url);
 
     return (
-      <ModalBase
+      <Modal
         overlayClassName={styles.overlay}
         className={styles.modal}
         onRequestClose={closeModal}
+        contentLabel={intl.formatMessage(intlMessages.title)}
+        hideBorder
       >
         <header data-test="videoModealHeader" className={styles.header}>
           <h3 className={styles.title}>{intl.formatMessage(intlMessages.title)}</h3>
-          <Button
-            data-test="modalBaseCloseButton"
-            className={styles.closeBtn}
-            label={intl.formatMessage(intlMessages.close)}
-            icon="close"
-            size="md"
-            hideLabel
-            onClick={closeModal}
-          />
         </header>
 
         <div className={styles.content}>
@@ -141,7 +133,7 @@ class ExternalVideoModal extends Component {
             disabled={startDisabled}
           />
         </div>
-      </ModalBase>
+      </Modal>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/modal/fullscreen/component.jsx

@@ -65,21 +65,23 @@ class ModalFullscreen extends PureComponent {
           <h1 className={styles.title}>{title}</h1>
           <div className={styles.actions}>
             <Button
-              data-test='modalDismissButton'
+              data-test="modalDismissButton"
               className={styles.dismiss}
               label={dismiss.label}
+              aria-label={`${dismiss.label} ${title}`}
               disabled={dismiss.disabled}
               onClick={this.handleAction.bind(this, 'dismiss')}
-              aria-describedby={'modalDismissDescription'}
+              aria-describedby="modalDismissDescription"
             />
             <Button
-              data-test='modalConfirmButton'
-              color={'primary'}
+              data-test="modalConfirmButton"
+              color="primary"
               className={styles.confirm}
               label={confirm.label}
+              aria-label={`${confirm.label} ${title}`}
               disabled={confirm.disabled}
               onClick={this.handleAction.bind(this, 'confirm')}
-              aria-describedby={'modalConfirmDescription'}
+              aria-describedby="modalConfirmDescription"
             />
           </div>
         </header>

bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx

@@ -43,6 +43,7 @@ class ModalSimple extends Component {
       modalisOpen,
       onRequestClose,
       shouldShowCloseButton,
+      contentLabel,
       ...otherProps
     } = this.props;
 
@@ -62,6 +63,7 @@ class ModalSimple extends Component {
             <Button
               className={styles.dismiss}
               label={dismiss.label}
+              aria-label={`${dismiss.label} ${title || contentLabel}`}
               icon="close"
               circle
               hideLabel

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -416,6 +416,7 @@ class VideoPreview extends Component {
         className={styles.modal}
         onRequestClose={this.handleProceed}
         hideBorder
+        contentLabel={intl.formatMessage(intlMessages.webcamSettingsTitle)}
       >
         <div className={styles.title}>
           {intl.formatMessage(intlMessages.webcamSettingsTitle)}