Merge pull request #3206 from r0hit-gupta/msft187

MSFT-187

Author: sushilshinde

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /**
  * Terms component which displays modal window with term details
  */
@@ -9,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';
@@ -54,6 +56,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 +66,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 +87,10 @@ export default class Terms extends React.Component {
     }
   }
 
+  componentDidUpdate() {
+    this.terms.current.focus();
+  }
+
   componentWillUnmount() {
     window.removeEventListener('message', this.messageHandler);
     window.removeEventListener('resize', this.resizeHandler);
@@ -152,17 +160,18 @@ 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">
+              <div styleName="modal-content" ref={this.terms} tabIndex="0">
                 <div styleName="title">
                   {terms.length > 1 ? defaultTitle : terms[0].title}
                 </div>
@@ -216,6 +225,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)}
                                 >
@@ -318,7 +329,8 @@ export default class Terms extends React.Component {
               </div>
             )
           }
-        </Modal>
+          </Modal>
+        </FocusTrap>
       </div>
     );
   }

src/shared/components/Terms/styles.scss

@@ -31,6 +31,10 @@
   flex: 1;
   flex-direction: column;
   max-height: 100%;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .scrollable-area {