fix: Added FocusTrap to Modal component (#349)

* fix: Added FocusTrap to Modal component

* add startTabIndex span

* changed initialFocus selector

* Moved focus-trap-react to dependencies

Author: chrismanciero

package-lock.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "fiori-fundamentals": "^1.4.0",
+    "focus-trap-react": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1"
   },

package.json

@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import FocusTrap from 'focus-trap-react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
@@ -43,43 +44,53 @@ export class Modal extends Component {
         }
 
         return ReactDOM.createPortal(
-            <div
-                {...rest}
-                className={modalClasses}>
-                <div className='modal-demo-bg'>
-                    <div className='fd-modal'>
+            <FocusTrap
+                focusTrapOptions={{
+                    initialFocus: 'div.modal-demo-bg > span'
+                }}>
+                <div
+                    {...rest}
+                    className={modalClasses}>
+                    <div className='modal-demo-bg'>
+                        <span tabIndex='-1' />
                         <div
-                            {...contentProps}
-                            className='fd-modal__content'
-                            role='document'>
-                            <div {...headerProps} className='fd-modal__header'>
-                                <h1 {...titleProps} className='fd-modal__title'>
-                                    {title}
-                                </h1>
-                                <button
-                                    {...closeProps}
-                                    aria-label='close'
-                                    className='fd-button--light fd-modal__close'
-                                    onClick={this.handleCloseClick} />
+                            aria-label={title}
+                            aria-modal='true'
+                            className='fd-modal'
+                            role='dialog'>
+                            <div
+                                {...contentProps}
+                                className='fd-modal__content'
+                                role='document'>
+                                <div {...headerProps} className='fd-modal__header'>
+                                    <h1 {...titleProps} className='fd-modal__title'>
+                                        {title}
+                                    </h1>
+                                    <button
+                                        {...closeProps}
+                                        aria-label='close'
+                                        className='fd-button--light fd-modal__close'
+                                        onClick={this.handleCloseClick} />
+                                </div>
+                                <div {...bodyProps} className='fd-modal__body'>
+                                    {children}
+                                </div>
+                                {actions ? (
+                                    <footer
+                                        {...footerProps}
+                                        className='fd-modal__footer'>
+                                        <div className='fd-modal__actions'>
+                                            {actions}
+                                        </div>
+                                    </footer>
+                                ) : (
+                                    ''
+                                )}
                             </div>
-                            <div {...bodyProps} className='fd-modal__body'>
-                                {children}
-                            </div>
-                            {actions ? (
-                                <footer
-                                    {...footerProps}
-                                    className='fd-modal__footer'>
-                                    <div className='fd-modal__actions'>
-                                        {actions}
-                                    </div>
-                                </footer>
-                            ) : (
-                                ''
-                            )}
                         </div>
                     </div>
                 </div>
-            </div>,
+            </FocusTrap >,
             this.bodyElm
         );
     }