From b3c3873f51a5574972e61ef64da6ebefcb47dfb0 Mon Sep 17 00:00:00 2001
From: r0hit-gupta <rohit1997gupta@gmail.com>
Date: Sat, 10 Aug 2019 00:16:29 +0530
Subject: [PATCH 1/5] changes for MSFT-187

---
 src/shared/components/Terms/TermDetails.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/shared/components/Terms/TermDetails.jsx b/src/shared/components/Terms/TermDetails.jsx
index b0ec297f8b..eada654b75 100644
--- a/src/shared/components/Terms/TermDetails.jsx
+++ b/src/shared/components/Terms/TermDetails.jsx
@@ -16,6 +16,7 @@ export default class TermDetails extends React.Component {
       loadingFrame: false,
     };
     this.frameLoaded = this.frameLoaded.bind(this);
+    this.iframe = React.createRef();
   }
 
   componentWillMount() {
@@ -30,6 +31,7 @@ export default class TermDetails extends React.Component {
     this.setState({
       loadingFrame: false,
     });
+    this.iframe.current.focus();
   }
 
   render() {
@@ -68,6 +70,7 @@ export default class TermDetails extends React.Component {
             }
             <iframe
               onLoad={this.frameLoaded}
+              ref={this.iframe}
               src={docuSignUrl}
               styleName={loadingFrame ? 'hidden' : 'frame'}
               title={details.title}

From 237f209a8221be0746c030534784bc828e671b3c Mon Sep 17 00:00:00 2001
From: r0hit-gupta <rohit1997gupta@gmail.com>
Date: Tue, 13 Aug 2019 14:41:59 +0530
Subject: [PATCH 2/5] access modal using tab

---
 src/shared/components/Terms/TermDetails.jsx |  3 ---
 src/shared/components/Terms/index.jsx       | 11 ++++++++++-
 src/shared/components/Terms/styles.scss     |  3 +++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/Terms/TermDetails.jsx b/src/shared/components/Terms/TermDetails.jsx
index eada654b75..b0ec297f8b 100644
--- a/src/shared/components/Terms/TermDetails.jsx
+++ b/src/shared/components/Terms/TermDetails.jsx
@@ -16,7 +16,6 @@ export default class TermDetails extends React.Component {
       loadingFrame: false,
     };
     this.frameLoaded = this.frameLoaded.bind(this);
-    this.iframe = React.createRef();
   }
 
   componentWillMount() {
@@ -31,7 +30,6 @@ export default class TermDetails extends React.Component {
     this.setState({
       loadingFrame: false,
     });
-    this.iframe.current.focus();
   }
 
   render() {
@@ -70,7 +68,6 @@ export default class TermDetails extends React.Component {
             }
             <iframe
               onLoad={this.frameLoaded}
-              ref={this.iframe}
               src={docuSignUrl}
               styleName={loadingFrame ? 'hidden' : 'frame'}
               title={details.title}
diff --git a/src/shared/components/Terms/index.jsx b/src/shared/components/Terms/index.jsx
index a9740cde9e..de9067931a 100644
--- a/src/shared/components/Terms/index.jsx
+++ b/src/shared/components/Terms/index.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /**
  * Terms component which displays modal window with term details
  */
@@ -54,6 +55,7 @@ export default class Terms extends React.Component {
     this.resizeHandler = this.resizeHandler.bind(this);
     this.nextTerm = this.nextTerm.bind(this);
     this.max = 0;
+    this.terms = React.createRef();
   }
 
   componentDidMount() {
@@ -63,6 +65,7 @@ export default class Terms extends React.Component {
     }
     window.addEventListener('message', this.messageHandler, false);
     window.addEventListener('resize', this.resizeHandler, false);
+    this.terms.current.focus();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -83,6 +86,10 @@ export default class Terms extends React.Component {
     }
   }
 
+  componentDidUpdate() {
+    this.terms.current.focus();
+  }
+
   componentWillUnmount() {
     window.removeEventListener('message', this.messageHandler);
     window.removeEventListener('resize', this.resizeHandler);
@@ -162,7 +169,7 @@ export default class Terms extends React.Component {
           }
           {
             !isLoadingTerms && (
-              <div styleName="modal-content">
+              <div styleName="modal-content" ref={this.terms} tabIndex="0">
                 <div styleName="title">
                   {terms.length > 1 ? defaultTitle : terms[0].title}
                 </div>
@@ -216,6 +223,8 @@ export default class Terms extends React.Component {
                                 </div>
                                 <div
                                   styleName="tab-title"
+                                  tabIndex="0"
+                                  role="tab"
                                   onClick={() => this.selectTerm(t)}
                                   onKeyPress={() => this.selectTerm(t)}
                                 >
diff --git a/src/shared/components/Terms/styles.scss b/src/shared/components/Terms/styles.scss
index 099aebc62c..3b34748288 100644
--- a/src/shared/components/Terms/styles.scss
+++ b/src/shared/components/Terms/styles.scss
@@ -31,6 +31,9 @@
   flex: 1;
   flex-direction: column;
   max-height: 100%;
+  &:focus {
+    outline: none;
+  }
 }
 
 .scrollable-area {

From f046bf7a69a6be6ad96688e6b945154cec8d36b0 Mon Sep 17 00:00:00 2001
From: r0hit-gupta <rohit1997gupta@gmail.com>
Date: Tue, 13 Aug 2019 14:53:41 +0530
Subject: [PATCH 3/5] update test

---
 src/shared/components/Terms/styles.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/components/Terms/styles.scss b/src/shared/components/Terms/styles.scss
index 3b34748288..3770ad09e7 100644
--- a/src/shared/components/Terms/styles.scss
+++ b/src/shared/components/Terms/styles.scss
@@ -31,6 +31,7 @@
   flex: 1;
   flex-direction: column;
   max-height: 100%;
+  
   &:focus {
     outline: none;
   }

From 2d5392610e70562de02995a414caf9ef995f62c4 Mon Sep 17 00:00:00 2001
From: r0hit-gupta <rohit1997gupta@gmail.com>
Date: Tue, 13 Aug 2019 14:59:27 +0530
Subject: [PATCH 4/5] update test

---
 src/shared/components/Terms/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Terms/styles.scss b/src/shared/components/Terms/styles.scss
index 3770ad09e7..2eb27072c7 100644
--- a/src/shared/components/Terms/styles.scss
+++ b/src/shared/components/Terms/styles.scss
@@ -31,7 +31,7 @@
   flex: 1;
   flex-direction: column;
   max-height: 100%;
-  
+
   &:focus {
     outline: none;
   }

From 0fe200bf3f6c94bab832ffcdeeab19c82e268cc4 Mon Sep 17 00:00:00 2001
From: r0hit-gupta <rohit1997gupta@gmail.com>
Date: Fri, 16 Aug 2019 13:57:59 +0530
Subject: [PATCH 5/5] trap focus in terms modal

---
 package.json                          |  1 +
 src/shared/components/Terms/index.jsx | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index d916831353..24af13e73a 100644
--- a/package.json
+++ b/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",
diff --git a/src/shared/components/Terms/index.jsx b/src/shared/components/Terms/index.jsx
index de9067931a..8f3a82621d 100644
--- a/src/shared/components/Terms/index.jsx
+++ b/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>
     );
   }