From ae02bcfa6f769a8fdb854041c9c5dcd5d9196b19 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Tue, 8 Feb 2022 08:21:20 -0800 Subject: [PATCH] App history: basic focusReset support Based on the draft at https://github.com/WICG/app-history/pull/201. This includes handling multiple conflicting focusReset options, with a console warning if necessary. Limitations, to be addressed in future commits: * This does not take into account autofocus="" elements. * This will reset focus even if the user has moved focus in the meantime. Bug: 1183545 Change-Id: I1eae4fc58af653fa7e463a1346a9bebc9536a59f --- app-history/focus-reset/basic.html | 64 ++++++++++++++++++ .../focus-reset/multiple-transitionWhile.html | 67 +++++++++++++++++++ app-history/focus-reset/resources/helpers.mjs | 45 +++++++++++++ 3 files changed, 176 insertions(+) create mode 100644 app-history/focus-reset/basic.html create mode 100644 app-history/focus-reset/multiple-transitionWhile.html create mode 100644 app-history/focus-reset/resources/helpers.mjs diff --git a/app-history/focus-reset/basic.html b/app-history/focus-reset/basic.html new file mode 100644 index 00000000000000..fb57cf864482a1 --- /dev/null +++ b/app-history/focus-reset/basic.html @@ -0,0 +1,64 @@ + + + + + diff --git a/app-history/focus-reset/multiple-transitionWhile.html b/app-history/focus-reset/multiple-transitionWhile.html new file mode 100644 index 00000000000000..d38df573e59536 --- /dev/null +++ b/app-history/focus-reset/multiple-transitionWhile.html @@ -0,0 +1,67 @@ + + + + + diff --git a/app-history/focus-reset/resources/helpers.mjs b/app-history/focus-reset/resources/helpers.mjs new file mode 100644 index 00000000000000..e3012a0b12e618 --- /dev/null +++ b/app-history/focus-reset/resources/helpers.mjs @@ -0,0 +1,45 @@ +// Usage note: if you use these more than once in a given file, be sure to +// clean up any navigate event listeners, e.g. by using { once: true }, between +// tests. + +export function testFocusWasReset(setupFunc, description) { + promise_test(async t => { + setupFunc(t); + + const button = document.body.appendChild(document.createElement("button")); + t.add_cleanup(() => { button.remove(); }); + + assert_equals(document.activeElement, document.body, "Start on body"); + button.focus(); + assert_equals(document.activeElement, button, "focus() worked"); + + const { committed, finished } = appHistory.navigate("#" + location.hash.substring(1) + "1"); + + await committed; + assert_equals(document.activeElement, button, "Focus stays on the button during the transition"); + + await finished.catch(() => {}); + assert_equals(document.activeElement, document.body, "Focus reset after the transition"); + }, description); +} + +export function testFocusWasNotReset(setupFunc, description) { + promise_test(async t => { + setupFunc(t); + + const button = document.body.appendChild(document.createElement("button")); + t.add_cleanup(() => { button.remove(); }); + + assert_equals(document.activeElement, document.body, "Start on body"); + button.focus(); + assert_equals(document.activeElement, button, "focus() worked"); + + const { committed, finished } = appHistory.navigate("#" + location.hash.substring(1) + "1"); + + await committed; + assert_equals(document.activeElement, button, "Focus stays on the button during the transition"); + + await finished.catch(() => {}); + assert_equals(document.activeElement, button, "Focus stays on the button after the transition"); + }, description); +}