access modal using tab

Author: r0hit-gupta

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}

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)}
                                 >

src/shared/components/Terms/styles.scss

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