fix(a11y): names that carry what they show; the unused-key check stops covering whole files
- The palette launcher's name replaced its visible "Jump to…" (and the key cap's its "Ctrl K"):
a voice-control "click Jump to" matched nothing (WCAG 2.5.3). Each name contains its text now.
- SegmentedToggle's `title` was only a tooltip on a non-focusable box — the live search's "how
many per batch" hint reached no keyboard or screen-reader user. It is the group's accessible
description, standalone and captioned alike.
- The unused-key contract let a template like `card.${status}` cover its whole namespace, which hid
five dead keys (deleted). Dynamic keys are matched by shape (`editor.*.hint`); a bare namespace
shape covers nothing, and the audit/quota namespaces are now held both ways by backendIds.
- CLAUDE.md's "FE control" row matches the lint rule it cites; each no-restricted-syntax entry has
its reason directly above it.
This commit is contained in:
@@ -69,4 +69,39 @@ describe("SegmentedToggle", () => {
|
||||
expect(screen.getByTestId("ic-my")).toBeTruthy();
|
||||
expect(screen.getByRole("button", { name: "Mine" }).getAttribute("title")).toBe("Your subs");
|
||||
});
|
||||
|
||||
// The hint was a `title` on a non-focusable box: the pointer's tooltip, and nothing at all for a
|
||||
// keyboard or screen-reader user (deep review, debt burn). It is the group's description now.
|
||||
it("describes the group by its title, standalone and captioned alike", () => {
|
||||
render(
|
||||
<>
|
||||
<SegmentedToggle
|
||||
options={OPTS}
|
||||
value="or"
|
||||
onChange={vi.fn()}
|
||||
ariaLabel="Show"
|
||||
title="Results per batch"
|
||||
/>
|
||||
<SegmentedToggle
|
||||
options={OPTS}
|
||||
value="or"
|
||||
onChange={vi.fn()}
|
||||
ariaLabel="Match"
|
||||
label="Match"
|
||||
title="Any or all"
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
expect(
|
||||
screen.getByRole("group", { name: "Show", description: "Results per batch" }),
|
||||
).toBeTruthy();
|
||||
expect(screen.getByRole("group", { name: "Match", description: "Any or all" })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("adds no description without a title", () => {
|
||||
render(<SegmentedToggle options={OPTS} value="or" onChange={vi.fn()} ariaLabel="Match" />);
|
||||
expect(screen.getByRole("group", { name: "Match" }).hasAttribute("aria-describedby")).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type ReactNode } from "react";
|
||||
import { useId, type ReactNode } from "react";
|
||||
|
||||
// Shared MATCH / segmented primitive — a rounded-full pill track where exactly ONE option is active
|
||||
// (radio-like). Backs the feed any/all + or/and "Match" toggles and the feed Mine/Library scope bar,
|
||||
@@ -31,13 +31,17 @@ export default function SegmentedToggle<T extends string>({
|
||||
// Optional left-hand caption; when set the control renders as a justify-between row (the feed/Plex
|
||||
// "Match" toggles). Omit for a standalone bar (the Mine/Library scope switch).
|
||||
label?: ReactNode;
|
||||
title?: string; // tooltip on the whole row (caption mode only)
|
||||
// What the choice means, beyond its name: the row's tooltip for the pointer, and the group's
|
||||
// accessible description for the keyboard and a screen reader — a `title` on a non-focusable box
|
||||
// alone reaches neither (it had only ever been the pointer's).
|
||||
title?: string;
|
||||
// Full-width track with flex-1 buttons (the scope bar); default is intrinsic width.
|
||||
fullWidth?: boolean;
|
||||
// sm = text-3xs, compact padding (the captioned match toggles); md = text-xs (the scope bar).
|
||||
size?: "sm" | "md";
|
||||
className?: string;
|
||||
}) {
|
||||
const hintId = useId();
|
||||
const track = (
|
||||
<div
|
||||
className={`inline-flex items-center rounded-full border border-border bg-card p-0.5 ${
|
||||
@@ -45,7 +49,14 @@ export default function SegmentedToggle<T extends string>({
|
||||
}${fullWidth ? " w-full" : ""}`}
|
||||
role="group"
|
||||
aria-label={ariaLabel}
|
||||
aria-describedby={title ? hintId : undefined}
|
||||
title={label == null ? title : undefined}
|
||||
>
|
||||
{title && (
|
||||
<span id={hintId} hidden>
|
||||
{title}
|
||||
</span>
|
||||
)}
|
||||
{options.map((o) => (
|
||||
<button
|
||||
key={o.value}
|
||||
|
||||
Reference in New Issue
Block a user