trap focus in terms modal

Author: r0hit-gupta

package.json

@@ -51,6 +51,7 @@
     "filestack-js": "^1.7.7",
     "filestack-react": "^2.0.0",
     "flag-icon-css": "^3.3.0",
+    "focus-trap-react": "^6.0.0",
     "helmet": "^3.12.1",
     "highlight.js": "^9.13.1",
     "html-to-text": "^3.3.0",

src/shared/components/Terms/index.jsx

@@ -10,6 +10,7 @@ import React from 'react';
 import PT from 'prop-types';
 import { Modal, PrimaryButton, Button } from 'topcoder-react-ui-kit';
 import LoadingIndicator from 'components/LoadingIndicator';
+import FocusTrap from 'focus-trap-react';
 import TermDetails from './TermDetails';
 
 import style from './styles.scss';
@@ -159,15 +160,16 @@ export default class Terms extends React.Component {
 
     return (
       <div key={(selectedTerm || {}).termsOfUseId}>
-        <Modal
-          onCancel={onCancel}
-          theme={{ container: style['modal-container'] }}
-        >
-          {
+        <FocusTrap>
+          <Modal
+            onCancel={onCancel}
+            theme={{ container: style['modal-container'] }}
+          >
+            {
             isLoadingTerms
             && <LoadingIndicator />
           }
-          {
+            {
             !isLoadingTerms && (
               <div styleName="modal-content" ref={this.terms} tabIndex="0">
                 <div styleName="title">
@@ -327,7 +329,8 @@ export default class Terms extends React.Component {
               </div>
             )
           }
-        </Modal>
+          </Modal>
+        </FocusTrap>
       </div>
     );
   }