fix(web): place aria-selected on the role=tab element (#32) + assert it

Per WAI-ARIA, aria-selected must be on the same element carrying role="tab".
The previous impl placed it on an inner <span> via the render-prop, making it
invisible to assistive technology. Move both role="tab" and aria-selected to
the NavLink, compute currentKind once from useParams, drop the render-prop.
Add a Vitest assertion that the selected tab has aria-selected="true" and an
unselected tab has aria-selected="false".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-04 17:32:18 +02:00
parent ff513e1712
commit 914527edc6
2 changed files with 11 additions and 3 deletions
+6
View File
@@ -36,6 +36,12 @@ test("kind tabs link to the other kinds", async () => {
expect(await screen.findByRole("tab", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
});
test("aria-selected is on the tab element and reflects the active kind", async () => {
renderApp(tree(), { route: "/authorities/person" });
expect(await screen.findByRole("tab", { name: /^person$/i })).toHaveAttribute("aria-selected", "true");
expect(screen.getByRole("tab", { name: /^place$/i })).toHaveAttribute("aria-selected", "false");
});
test("create without EN label shows required alert and does not POST", async () => {
let posted = false;
server.use(