refactor(reorder): drop the Alt + Arrow shortcut, keep drag only

The reorder shortcut cannot be made reliable in this UI. `Alt + Arrow` is
the browser's tab-history / back-forward gesture on several platforms,
and the modal already binds bare `ArrowLeft`/`ArrowRight` to model
navigation, so the binding either did nothing — a keypress with nothing
focused never reaches a listener on the tag list — or fought the browser.
An affordance that occasionally navigates the page away is worse than
having no keyboard path at all, so drop it.

Reordering is pointer-only again: drag the chip (tags) or its `⠿` grip
(trigger words, whose chip body is click-to-edit). Everything that existed
only to serve the shortcut goes with it — the keydown listener, the hover
tracking used to resolve the target chip, the aria-live announcements, the
per-grip position labels and `moveItemWithinContainer`. The grip becomes a
decorative, non-focusable `<span>` (`aria-hidden`, behind a 5px drag
threshold) instead of a `<button>`, so it no longer promises a keyboard
action it cannot perform.

The tooltip and hint drop the shortcut mention in all 10 locales
(`common.reorder.dragHandle` = "Drag to reorder" and the localised
equivalents); `common.reorder.ariaLabel` and `common.reorder.announcement`
are pruned from every locale by the sync script. The i18n guidelines
record the decision so no shortcut is re-added without re-adding the keys.
This commit is contained in:
Will Miao
2026-09-17 09:07:24 +08:00
parent f67689b0f9
commit e09fe5888b
19 changed files with 116 additions and 405 deletions
@@ -112,37 +112,6 @@ export function disablePointerSort(container, options = {}) {
}
}
/**
* Move an item by `offset` positions inside its container.
* Shared by the keyboard interaction so it matches drag ordering exactly.
* @param {HTMLElement} item - Item to move
* @param {number} offset - Negative moves earlier, positive moves later
* @param {Object} [options] - Same options as enablePointerSort(); use
* `options.container` when the item is not attached to its list yet
* @returns {{index: number, total: number}|null} New position, or null when out of range
*/
export function moveItemWithinContainer(item, offset, options = {}) {
if (!item || !offset) return null;
const config = resolveConfig(options);
const container = options.container || item.parentElement;
if (!container) return null;
const items = Array.from(container.querySelectorAll(config.itemSelector)).filter(
(element) => !element.classList.contains(config.placeholderClass),
);
const index = items.indexOf(item);
if (index === -1) return null;
const target = index + offset;
if (target < 0 || target >= items.length) return null;
const reference = offset < 0 ? items[target] : items[target].nextSibling;
container.insertBefore(item, reference);
return { index: target, total: items.length };
}
function handlePointerDown(event, item, container, config) {
if (activeDragState || pendingDragState) return;
if (typeof event.button === 'number' && event.button !== 0) return;