peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): a disabled menu row says why it is off, under its label

Browse Source 
The reason for a disabled menu row lived in a `title` on a natively disabled
button: no pointer events, so no tooltip, and roving focus skips the row —
four translated sentences reached nobody (the Watch later rename/delete
lock, "no other list to move to", the reorder gate). An aria-disabled row was
tried and reverted in E10's review. ActionMenu items now take a `note`,
rendered as a muted line under a disabled row's label: seen, and readable in
a screen reader's browse mode. Only the icon and label dim — row-level
opacity would dim the explanation too. The reorder group states its reason
once, under its first row.
This commit is contained in:
peter
2026-09-19 07:57:20 +02:00
parent df7c3db085
commit bc138e3b37
4 changed files with 55 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/ActionMenu.dom.test.tsx
+16
View File
@@ -42,6 +42,22 @@ describe("ActionMenu", () => {
// floating-ui never computes a position in jsdom, so the surface stays visibility:hidden; the items
// are in the DOM but the a11y tree treats them as hidden — hence `{ hidden: true }` on role queries.
it("says why a disabled row is off, under its label — and only on a disabled row", () => {
// A `title` on a disabled row reached nobody: a disabled button fires no pointer events and
// roving focus skips it. The reason is visible text now, undimmed so it can be read.
renderMenu([
{ id: "move", label: "Move to", onSelect: vi.fn(), disabled: true, note: "No other list" },
{ id: "sync", label: "Sync", onSelect: vi.fn(), note: "never shown" },
]);
fireEvent.click(screen.getByRole("button", { name: "Catalog actions" }));
const [move, sync] = screen.getAllByRole("menuitem", { hidden: true });
expect(move!.textContent).toBe("Move toNo other list");
expect(sync!.textContent).toBe("Sync");
const note = screen.getByText("No other list");
expect(note.closest(".opacity-50")).toBeNull();
expect(screen.getByText("Move to").className).toContain("opacity-50");
});
it("opens on click and shows one menuitem per item", () => {
renderMenu([
{ id: "sync", label: "Sync", onSelect: vi.fn() },
frontend/src/components/ui/ActionMenu.tsx
+31 -14
View File
@@ -16,24 +16,37 @@ import { closeThenAct, useAnchoredPopover } from "./anchoredPopoverHooks";
/** Shared surface paint for every menu built on this file — the ⋯ menu, its submenus, and
* `ContextMenu`. One constant so a context menu can never look like a different component. */
export const MENU_SURFACE = "glass-menu min-w-52 rounded-xl p-1.5 animate-[popIn_0.16s_ease]";
// No `disabled:opacity-50` on the row itself: a disabled row may carry a `note`, and opacity on the
// row would dim the one line that explains it. The icon and the label dim instead (`dim`).
const ROW =
"flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm outline-hidden transition disabled:opacity-50";
"flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm outline-hidden transition";
const dim = (disabled: boolean | undefined) => (disabled ? " opacity-50" : "");
/** The label, and under it — on a disabled row only — the reason it is off. */
function RowLabel({ item }: { item: MenuItemBase }) {
return (
<span className="min-w-0 flex-1">
<span className={`block truncate${dim(item.disabled)}`}>{item.label}</span>
{item.disabled && item.note && (
<span className="block text-2xs leading-snug text-muted">{item.note}</span>
)}
</span>
);
}
interface MenuItemBase {
id: string;
label: string;
icon?: ReactNode; // an element (so a caller can swap in a spinning icon while pending)
disabled?: boolean;
/** Optional native tooltip (carries a longer hint the label alone can't).
*
* KNOWN GAP, deliberately still open: on a `disabled` row this reaches nobody — a disabled button
* fires no pointer events, so no tooltip, and floating-ui's roving focus skips it. E10 review
* round 1 tried an `aria-disabled` "inert" row to fix that; round 2 found `useListNavigation`
* skips `aria-disabled` identically (`isListIndexDisabled`), which AnchoredPopover's own comment
* already said — so the swap fixed nothing and made the mouse worse (the row took the active
* highlight, then no-opped on click). Reverted. A real fix has to put the reason somewhere a
* disabled row is not: a visible hint line in the menu, or an `aria-describedby` note. */
/** Optional native tooltip (carries a longer hint the label alone can't) — for an ENABLED row. */
title?: string;
/** Why a DISABLED row is off, shown as a line under its label. Not a `title`: a disabled button
* fires no pointer events (no tooltip) and roving focus skips it, so a reason there reached
* nobody. An `aria-disabled` row was tried and reverted (E10 review rounds 1–2: floating-ui skips
* it identically, and the mouse got a highlight that then no-opped). Visible text is the one
* place a disabled row's reason can be: seen, and read in a screen reader's browse mode. */
note?: string;
/** Draw a divider above this item. Ignored on the first item — a menu never opens with a rule. */
separatorBefore?: boolean;
}
@@ -88,11 +101,13 @@ export function MenuItemList({
className={`${ROW}${it.danger ? " text-danger" : ""}`}
>
{it.icon && (
<span className={`shrink-0 ${it.danger ? "text-danger" : "text-muted"}`}>
<span
className={`shrink-0 ${it.danger ? "text-danger" : "text-muted"}${dim(it.disabled)}`}
>
{it.icon}
</span>
)}
<span className="flex-1 truncate">{it.label}</span>
<RowLabel item={it} />
</PopoverItem>
)}
</Fragment>
@@ -142,8 +157,10 @@ function SubMenu({ item, onClose }: { item: SubmenuItem; onClose: () => void })
}}
className={ROW}
>
{item.icon && <span className="shrink-0 text-muted">{item.icon}</span>}
<span className="flex-1 truncate">{item.label}</span>
{item.icon && (
<span className={`shrink-0 text-muted${dim(item.disabled)}`}>{item.icon}</span>
)}
<RowLabel item={item} />
<ChevronRight className="h-4 w-4 shrink-0 text-muted" aria-hidden="true" />
</PopoverItem>
<PopoverSurface