diff --git a/ui/src/app/core/menu-nav.spec.ts b/ui/src/app/core/menu-nav.spec.ts new file mode 100644 index 0000000..a2e4d9c --- /dev/null +++ b/ui/src/app/core/menu-nav.spec.ts @@ -0,0 +1,27 @@ +import { expect, test } from 'bun:test'; +import { stepIndex } from './menu-nav'; + +// item, separator, item, disabled, item — the shape of a real row menu +const menu = [true, false, true, false, true]; + +test('a fresh menu: down lands on the first entry, up on the last', () => { + expect(stepIndex(menu, -1, 1)).toBe(0); + expect(stepIndex(menu, -1, -1)).toBe(4); +}); + +test('separators and disabled entries are skipped', () => { + expect(stepIndex(menu, 0, 1)).toBe(2); + expect(stepIndex(menu, 2, 1)).toBe(4); + expect(stepIndex(menu, 4, -1)).toBe(2); +}); + +test('wraps both ways', () => { + expect(stepIndex(menu, 4, 1)).toBe(0); + expect(stepIndex(menu, 0, -1)).toBe(4); +}); + +test('nothing selectable leaves the highlight alone', () => { + expect(stepIndex([false, false], -1, 1)).toBe(-1); + expect(stepIndex([false, false], -1, -1)).toBe(-1); + expect(stepIndex([], -1, -1)).toBe(-1); +}); diff --git a/ui/src/app/core/menu-nav.ts b/ui/src/app/core/menu-nav.ts new file mode 100644 index 0000000..17bfd70 --- /dev/null +++ b/ui/src/app/core/menu-nav.ts @@ -0,0 +1,15 @@ +/** + * Next highlighted menu index: skips unselectable entries and wraps. From -1 + * (nothing highlighted yet), down lands on the first selectable entry and up + * on the LAST — stepping up from -1 directly would land one short of it. + * Returns `from` unchanged when nothing is selectable. + */ +export function stepIndex(selectable: boolean[], from: number, delta: 1 | -1): number { + const count = selectable.length; + let index = from < 0 && delta < 0 ? 0 : from; + for (let hops = 0; hops < count; hops++) { + index = (index + delta + count) % count; + if (selectable[index]) return index; + } + return from; +} diff --git a/ui/src/app/skins/shadlike/context-menu.ts b/ui/src/app/skins/shadlike/context-menu.ts index a1c8c2a..4ff40d9 100644 --- a/ui/src/app/skins/shadlike/context-menu.ts +++ b/ui/src/app/skins/shadlike/context-menu.ts @@ -10,6 +10,7 @@ import { import { NgIcon } from '@ng-icons/core'; import { ContextMenuService, type MenuItem } from '@core/context-menu.service'; import { FocusService } from '@core/focus.service'; +import { stepIndex } from '@core/menu-nav'; import { remPx } from '@core/metrics'; /** Rough per-item metrics in REM, used only to decide whether the menu must @@ -38,6 +39,7 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size #menuEl role="menu" tabindex="-1" + [attr.aria-activedescendant]="activeIndex() >= 0 ? 'ctx-item-' + activeIndex() : null" (keydown)="onKeydown($event)" [style.left.px]="position().x" [style.top.px]="position().y" @@ -50,6 +52,7 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size