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
+2 -21
View File
@@ -124,6 +124,7 @@
cursor: grab;
/* Keep a touch drag on the handle from scrolling the surrounding panel */
touch-action: none;
user-select: none;
transition: opacity 0.2s ease, color 0.2s ease;
}
@@ -137,18 +138,11 @@
margin-right: 4px;
}
.reorder-handle:hover,
.reorder-handle:focus-visible {
.reorder-handle:hover {
opacity: 0.9;
color: var(--lora-accent);
}
.reorder-handle:focus-visible {
outline: 2px solid var(--lora-accent);
outline-offset: 1px;
border-radius: 2px;
}
.reorder-handle:active {
cursor: grabbing;
}
@@ -199,19 +193,6 @@ body.reorder-drag-active * {
cursor: grabbing !important;
}
/* Screen-reader-only live region announcing reorder moves */
.reorder-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.metadata-item-content {
color: var(--lora-accent) !important;
font-size: 0.85em;