Skip to content

Commit

Permalink
Reset focus on navigation (#309)
Browse files Browse the repository at this point in the history
* reset focus properly on navigation (#307)

* fix
  • Loading branch information
Rich Harris authored Jan 7, 2021
1 parent e09b6be commit 72da270
Show file tree
Hide file tree
Showing 7 changed files with 48 additions and 14 deletions.
5 changes: 5 additions & 0 deletions .changeset/tidy-books-reply.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

Reset focus properly
7 changes: 4 additions & 3 deletions packages/kit/src/runtime/internal/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,9 @@ export class Router {
}
});

// make it possible to reset focus
document.body.setAttribute('tabindex', '-1');

// load current page
this.history.replaceState({}, '', location.href);

Expand Down Expand Up @@ -177,9 +180,7 @@ export class Router {

await this.renderer.render(selected);

if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
document.body.focus();

const deep_linked = hash && document.getElementById(hash.slice(1));
if (scroll) {
Expand Down
3 changes: 3 additions & 0 deletions test/apps/basics/src/routes/focus/$layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<nav><a href="/focus/a">a</a> <a href="/focus/b">b</a></nav>

<slot />
21 changes: 21 additions & 0 deletions test/apps/basics/src/routes/focus/__tests__.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as assert from 'uvu/assert';

export default function (test) {
test('resets focus', async ({ visit, click, keyboard, evaluate, contains }) => {
await visit('/focus/a');

await click('[href="/focus/b"]');
assert.ok(await contains('b'));
assert.equal(await evaluate(() => document.activeElement.nodeName), 'BODY');
await keyboard.press('Tab');
assert.equal(await evaluate(() => document.activeElement.nodeName), 'A');
assert.equal(await evaluate(() => document.activeElement.textContent), 'a');

await click('[href="/focus/a"]');
assert.ok(await contains('a'));
assert.equal(await evaluate(() => document.activeElement.nodeName), 'BODY');
await keyboard.press('Tab');
assert.equal(await evaluate(() => document.activeElement.nodeName), 'A');
assert.equal(await evaluate(() => document.activeElement.textContent), 'a');
});
}
1 change: 1 addition & 0 deletions test/apps/basics/src/routes/focus/a.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>a</p>
1 change: 1 addition & 0 deletions test/apps/basics/src/routes/focus/b.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>b</p>
24 changes: 13 additions & 11 deletions test/runner.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ async function setup({ port }) {
await page
.waitForFunction(
({ expectedValue, selector }) =>
document.querySelector(selector) && document.querySelector(selector).textContent === expectedValue,
document.querySelector(selector) &&
document.querySelector(selector).textContent === expectedValue,
{ expectedValue, selector },
{ timeout: defaultTimeout }
)
Expand All @@ -28,7 +29,7 @@ async function setup({ port }) {

const capture_requests = async (operations) => {
const requests = [];
const on_request = request => requests.push(request.url());
const on_request = (request) => requests.push(request.url());
page.on('request', on_request);

try {
Expand Down Expand Up @@ -56,9 +57,9 @@ async function setup({ port }) {

return {
base,
visit: path => page.goto(base + path),
contains: async str => (await page.innerHTML('body')).includes(str),
html: async selector => await page.innerHTML(selector, { timeout: defaultTimeout }),
visit: (path) => page.goto(base + path),
contains: async (str) => (await page.innerHTML('body')).includes(str),
html: async (selector) => await page.innerHTML(selector, { timeout: defaultTimeout }),
fetch: (url, opts) => fetch(`${base}${url}`, opts),
text,
evaluate: (fn) => page.evaluate(fn),
Expand All @@ -73,9 +74,10 @@ async function setup({ port }) {
wait_for_function: (fn, arg, options) =>
page.waitForFunction(fn, arg, { timeout: defaultTimeout, ...options }),
capture_requests,
set_extra_http_headers: headers => page.setExtraHTTPHeaders(headers),
set_extra_http_headers: (headers) => page.setExtraHTTPHeaders(headers),
pathname: () => page.url().replace(base, ''),
$: selector => page.$(selector)
keyboard: page.keyboard,
$: (selector) => page.$(selector)
};
}

Expand All @@ -88,15 +90,15 @@ export function runner(callback, options = {}) {

const duplicate = (test_fn) => {
return (name, callback) => {
test_fn(`${name} [no js]`, async context => {
test_fn(`${name} [no js]`, async (context) => {
await callback({
...context,
js: false
});
});

if (!options.amp) {
test_fn(`${name} [js]`, async context => {
test_fn(`${name} [js]`, async (context) => {
await callback({
...context,
js: true,
Expand All @@ -108,8 +110,8 @@ export function runner(callback, options = {}) {
});
});
}
}
}
};
};

const test = duplicate(suite);
test.skip = duplicate(suite.skip);
Expand Down

0 comments on commit 72da270

Please sign in to comment.