From 8f898a0e2c1ad4cf5aea6acdb01cf4273127d1c4 Mon Sep 17 00:00:00 2001
From: Aidan Feldman <aidan.feldman@gsa.gov>
Date: Fri, 6 Jul 2018 18:18:52 -0400
Subject: [PATCH 1/2] only focus on the main section when the section is
 changed

Fixes issue with page scrolling up when navigating within a page.
---
 src/components/Section/Section.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Section/Section.jsx b/src/components/Section/Section.jsx
index e4e7bcd0f..abf4e44db 100644
--- a/src/components/Section/Section.jsx
+++ b/src/components/Section/Section.jsx
@@ -25,12 +25,18 @@ class Section extends React.Component {
     this.update(this.props)
   }
 
-  componentDidUpdate () {
-    // Once a section updates then attempt to focus on the first form element
+  focusOnMainSection () {
     const el = window.document.querySelector('.eapp-section-focus')
     if (el) {
+      el.focus()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    // for keyboard navigation accessbility, focus on the main content area after a new section is navigated to
+    if (this.props.location.pathname !== prevProps.location.pathname) {
       window.setTimeout(() => {
-        el.focus()
+        this.focusOnMainSection()
       }, 200)
     }
   }

From d5d14da74ede7fb1fe851511bfd8070f8cddd9db Mon Sep 17 00:00:00 2001
From: Aidan Feldman <aidan.feldman@gsa.gov>
Date: Fri, 6 Jul 2018 18:51:53 -0400
Subject: [PATCH 2/2] don't rely on a timeout for the section focus element to
 be rendered

---
 src/components/Main/App.jsx        | 19 +++++++++++++++++--
 src/components/Main/App.test.jsx   |  9 ++++++---
 src/components/Section/Section.jsx | 16 ----------------
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/Main/App.jsx b/src/components/Main/App.jsx
index 2c1beba81..e75f842ab 100644
--- a/src/components/Main/App.jsx
+++ b/src/components/Main/App.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { withRouter } from 'react-router'
 import { i18n } from '../../config'
 import { SectionTitle, ProgressBar, ScoreCard, Navigation, NavigationToggle } from '..'
 import { Introduction, Show } from '../Form'
@@ -38,6 +39,20 @@ class App extends React.Component {
     }
     this.showInstructions = this.showInstructions.bind(this)
     this.dismissInstructions = this.dismissInstructions.bind(this)
+
+    // workaround for not having React.createRef(), introduced in React 16.3
+    // https://reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs
+    this.sectionFocusEl = null
+    this.setSectionFocusEl = (el) => {
+      this.sectionFocusEl = el
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // for keyboard navigation accessbility, focus on the main content area after a new section is navigated to
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.sectionFocusEl.focus()
+    }
   }
 
   showInstructions (event) {
@@ -146,7 +161,7 @@ class App extends React.Component {
               <button onClick={this.showInstructions} className="instructions mobile-visible"><span>{i18n.t('app.instructions')}</span></button>
               &nbsp;
             </div>
-            <a href="javascript:;;;" className="eapp-section-focus" title="Main content. Please press TAB to go to the next question"></a>
+            <a href="javascript:;;;" className="eapp-section-focus" title="Main content. Please press TAB to go to the next question" ref={this.setSectionFocusEl}></a>
             <div id="main-content" className={klassCore}>
               {this.props.children}
               &nbsp;
@@ -179,4 +194,4 @@ function mapStateToProps (state) {
 
 // Wraps the the App component with connect() which adds the dispatch()
 // function to the props property for this component
-export default connect(mapStateToProps)(App)
+export default withRouter(connect(mapStateToProps)(App))
diff --git a/src/components/Main/App.test.jsx b/src/components/Main/App.test.jsx
index 062e06d2a..4eec0734b 100644
--- a/src/components/Main/App.test.jsx
+++ b/src/components/Main/App.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { MemoryRouter } from 'react-router'
 import App from './App'
 import renderer from 'react-test-renderer'
 import configureMockStore from 'redux-mock-store'
@@ -19,9 +20,11 @@ test('Renders homepage', () => {
   })
 
   const component = renderer.create(
-    <Provider store={store}>
-      <App/>
-    </Provider>
+    <MemoryRouter>
+      <Provider store={store}>
+        <App/>
+      </Provider>
+    </MemoryRouter>
   )
 
   let tree = component.toJSON()
diff --git a/src/components/Section/Section.jsx b/src/components/Section/Section.jsx
index abf4e44db..a7ed9a756 100644
--- a/src/components/Section/Section.jsx
+++ b/src/components/Section/Section.jsx
@@ -25,22 +25,6 @@ class Section extends React.Component {
     this.update(this.props)
   }
 
-  focusOnMainSection () {
-    const el = window.document.querySelector('.eapp-section-focus')
-    if (el) {
-      el.focus()
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    // for keyboard navigation accessbility, focus on the main content area after a new section is navigated to
-    if (this.props.location.pathname !== prevProps.location.pathname) {
-      window.setTimeout(() => {
-        this.focusOnMainSection()
-      }, 200)
-    }
-  }
-
   update (props) {
     const subsection = props.subsection || 'intro'
     const path = `/form/${props.section}/${subsection}`