fix(keys): epic-end review round 2 — focus comes back to the card, the right rail and the reason

Whole-epic deep-review of E11 (18 raised, 12 kept; B and G refuted, four latent test-hardening notes dropped),
plus the admin refusal copy gap round 1 surfaced.

- A context menu opened from a card the keyboard is on gives the focus back to the card. floating-ui returns
  focus through the opener's first tabbable descendant even when handed a ref, so for a non-tabbable opener the
  surface restores it itself (measured in Chrome: j, Shift+F10, Escape left it on the thumbnail link).
- Back finds a named list (a rail) by its name: a rail that appeared above it after the cache expired sent the
  focus into the wrong rail. An unnamed list is matched only when the page has the same number of lists.
- The slot kept for a removed item is forgotten once focus moves on to page content (search, a chip), so j after
  new results starts at the first visible item; a menu or dialog opened from the item keeps it.
- The list keys reach the cheat sheet only while a list has an item.
- A j-focused card root is a named group while it holds the focus.
- The channel page's Block and Hide toggles keep the focus while their request runs.
- A split export that fails part-way says how many clips were added and deselects them, so a retry adds only
  the rest.
- Config save, the one-click share link and "log out other sessions" report failures with their reason.
- VirtualGrid uses the one scroll-parent walk listNav measures against.
- Admin refusals (activate, resend, invite, set-password link) say why in HU and EN instead of "try again";
  the email-off special cases collapse into that one reason. The contract reads the codes from localizeDetail.
  HU copy points to Konfiguráció → E-mail / SMTP; HU "unreachable" matches the EN change of round 1.
This commit is contained in:
2026-09-13 19:18:04 +02:00
parent f130a1c05a
commit 3cd0c525e2
33 changed files with 640 additions and 113 deletions
+83
View File
@@ -429,3 +429,86 @@ describe("useListNav · the roving tabindex and a removed item (deep-review E11
);
});
});
describe("useListNav · leaving the list, and naming the item (deep-review E11 round 2)", () => {
function Swappable({ ids }: { ids: number[] }) {
const ref = useRef<HTMLDivElement>(null);
useListNav(ref, { enabled: true });
return (
<div ref={ref}>
{ids.map((id, i) => (
<div key={id} {...navItemAttrs(i)} data-testid={`r${id}`}>
<button>act</button>
</div>
))}
</div>
);
}
// `s`, a query, Escape: the feed stays mounted with new results and the old card is gone. The slot
// kept for a REMOVED card sent the next `j` to the third new result instead of the first.
it("starts from the first visible item after focus went on to a field and the items changed", () => {
withLayout(
(_, n) => ({ left: 0, top: n * 100 }),
() => {
const page = (ids: number[]) => (
<>
<input data-testid="field" />
<Swappable ids={ids} />
</>
);
const { rerender } = render(page([0, 1, 2, 3]));
press("j");
press("j");
press("j");
expect(focused()).toBe("r2");
act(() => screen.getByTestId("field").focus());
rerender(page([4, 5, 6, 7]));
act(() => screen.getByTestId("field").blur());
press("j");
expect(focused()).toBe("r4");
},
);
});
// A confirm (or the item's own menu) takes the focus before the delete it confirms: back from it, the
// next `j` still goes on from the deleted row's slot.
it("keeps the slot when the removal was confirmed in a dialog", () => {
withLayout(
(_, n) => ({ left: 0, top: n * 100 }),
() => {
const page = (ids: number[]) => (
<>
<div role="dialog">
<button data-testid="ok">ok</button>
</div>
<Swappable ids={ids} />
</>
);
const { rerender } = render(page([0, 1, 2, 3]));
press("j");
press("j");
press("j");
act(() => screen.getByTestId("ok").focus());
rerender(page([0, 1, 3]));
act(() => screen.getByTestId("ok").blur());
press("j");
expect(focused()).toBe("r3");
},
);
});
// A card root is a plain <div>: focused by `j` it had no role and no name, so a screen reader read
// an unlabelled run of text.
it("names a focused card after what it opens while it holds the focus, then gives the name back", () => {
render(<List id="a" count={2} />);
press("j");
const a0 = screen.getByTestId("a0");
expect(a0.getAttribute("role")).toBe("group");
expect(a0.getAttribute("aria-label")).toBe("title");
press("j");
expect(a0.hasAttribute("role")).toBe(false);
expect(a0.hasAttribute("aria-label")).toBe(false);
expect(screen.getByTestId("a1").getAttribute("aria-label")).toBe("title");
});
});