<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When navigating from one page to another, the new page should have its focus set on <code class="notranslate">&lt;body&gt;</code> as the document root.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It's not like this using <code class="notranslate">next/link</code>. Due to being a single page app the focus remains on the link that has been clicked.<br>
The page scrolls to the top to give a visual indication of a page change, but the focus doesn't change.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I've created an example app to better demonstrate the problem:<br>
<a href="https://nextjs-focus-problem-zishcmqatc.now.sh/" rel="nofollow">https://nextjs-focus-problem-zishcmqatc.now.sh/</a><br>
Its repo is here: <a href="https://github.com/osartun/example-focus-problem">https://github.com/osartun/example-focus-problem</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I've noticed the problem while navigating my site with a screen reader and keyboard input. My site has a <em>Next page</em> link at the bottom of the page (<a href="https://thytos.com/video/programmieren-lernen-mit-javascript/text-schreiben" rel="nofollow">see here</a>, fyi: I fixed the problem with a work around on my site, so you can't reproduce it there).<br>
After clicking and navigating to the next page, tabbing through the links started at the bottom of the page where the <em>Next page</em> link was.</p>
<h2 dir="auto">Proposed solution</h2>
<p dir="auto"><code class="notranslate">next/link</code> scrolls to the top of the page after a successful navigation.<br>
<a href="https://github.com/zeit/next.js/blob/42e21288a91b2f58d90c3cc782766611de30630f/lib/link.js#L77">https://github.com/zeit/next.js/blob/42e21288a91b2f58d90c3cc782766611de30630f/lib/link.js#L77</a><br>
I think that should be extended with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="document.body.focus();"><pre class="notranslate"><code class="notranslate">document.body.focus();
</code></pre></div>
<p dir="auto">The <code class="notranslate">withRouter</code> HOC passes <code class="notranslate">undefined</code> for the <code class="notranslate">router</code> prop in SSR with custom routes. The client render works as expected, causing a React server/client checksum error.</p>
<p dir="auto">I use <a href="https://github.com/fridays/next-routes"><code class="notranslate">next-routes</code></a>, but others <a href="https://zeit-community.slack.com/archives/C2U01UYEA/p1504568123000007?thread_ts=1504520217.000050&amp;cid=C2U01UYEA" rel="nofollow">on Slack</a> are having the same issue when using <code class="notranslate">app.render</code> in <code class="notranslate">server.js</code>.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Context</h2>
<p dir="auto">I am attempting to style active links.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>v3.2.1</td>
</tr>
<tr>
<td>node</td>
<td>v8.4.0</td>
</tr>
</tbody>
</table>