Something went wrong. Try again.
Web frontend and supporting services for lance.blue
Something went wrong. Try again.
4.9 kB · 155 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156/** * A screen change must not drop the keyboard. * * Most of this app moves between screens on a button inside the screen — * "Play against a bot", launching a match, going back from the waiting screen, * "Go home" on the not-found screen, "Try again" on the error screen. Every one * of those removes the button that was just pressed, and a removed element's * focus goes to <body>: the next Tab restarts from the top of the document, and * a screen reader is told nothing about the page having changed. Nothing * errors, the screen renders, and a mouse never notices. * * The rule has two halves and the second is the one that is easy to get wrong. * render() takes focus only when it destroyed the element that held it. A * masthead link lives outside #app, so clicking Home must leave focus on Home; * a render that always grabbed the heading would yank it away every time. * * Run with `npm test`. */import { test } from "node:test";import assert from "node:assert/strict";
// Enough of the DOM for render(): parentage, so contains() can answer; a// children array, so replaceChildren() can drop the old screen; and one// document-wide activeElement, which is the thing under test.class FakeElement { constructor(tag) { this.tagName = tag.toUpperCase(); this.attributes = {}; this.children = []; this.parent = null; } setAttribute(name, value) { this.attributes[name] = value; } removeAttribute(name) { delete this.attributes[name]; } append(...nodes) { for (const node of nodes) { node.parent = this; this.children.push(node); } } replaceChildren(...nodes) { for (const old of this.children) old.parent = null; this.children = []; this.append(...nodes); } contains(node) { for (let p = node; p; p = p.parent) if (p === this) return true; return false; } /** Only ever asked for "h1", so that is all this answers. */ querySelector(selector) { assert.equal(selector, "h1", `unexpected selector ${selector}`); for (const child of this.children) { if (child.tagName === "H1") return child; const deeper = child.querySelector?.(selector); if (deeper) return deeper; } return null; } focus(options) { globalThis.document.activeElement = this; this.focusOptions = options; }}
const body = new FakeElement("body");const app = new FakeElement("div");
globalThis.document = { activeElement: body, querySelector: (selector) => (selector === "#app" ? app : null), createElement: (tag) => new FakeElement(tag),};
const { render } = await import("../src/dom.ts");
/** A screen: a heading and a button, the shape every screen here has. */function screen(heading = "Somewhere") { const h1 = new FakeElement("h1"); h1.textContent = heading; const section = new FakeElement("section"); section.append(new FakeElement("button")); return [h1, section];}
test("focus lands on the new heading when the render destroyed it", () => { const [h1, section] = screen("Before"); render(h1, section); // The player is on a button inside the screen — "Go home", "Play against a // bot", whichever put them there. const pressed = section.children[0]; document.activeElement = pressed;
const next = screen("After"); render(...next);
assert.equal( document.activeElement, next[0], "focus did not follow the render", ); assert.equal(document.activeElement.textContent, "After"); assert.equal( next[0].attributes.tabindex, "-1", "the heading cannot take focus without one", ); // start() has already scrolled to the top; focusing must not undo it. assert.deepEqual(next[0].focusOptions, { preventScroll: true });});
test("focus outside #app is left alone", () => { render(...screen("Before")); // A masthead link: outside the screen, and still there afterwards. const navLink = new FakeElement("a"); body.append(navLink); document.activeElement = navLink;
const next = screen("After"); render(...next);
assert.equal( document.activeElement, navLink, "render stole focus from a control it never touched", ); assert.equal(next[0].attributes.tabindex, undefined);});
test("a screen with no heading falls back to #app", () => { const section = new FakeElement("section"); const pressed = new FakeElement("button"); section.append(pressed); render(section); document.activeElement = pressed;
render(new FakeElement("section"));
assert.equal(document.activeElement, app); assert.equal(app.attributes.tabindex, "-1");});
test("nothing focused at all is not treated as focus to rescue", () => { render(...screen("Before")); document.activeElement = body;
const next = screen("After"); render(...next);
assert.equal(document.activeElement, body); assert.equal(next[0].attributes.tabindex, undefined);});