fix(a11y): keyboard-reorder for panel groups (U-3.1.5)

PanelGroups registered only a PointerSensor, so its focusable, "reorderable" group
grips did nothing from the keyboard. Added KeyboardSensor + sortableKeyboardCoordinates,
matching the other sortable lists (Playlists/PlexPlaylistView already had it).
This commit is contained in:
2026-07-21 22:29:39 +02:00
parent 3f0f918689
commit f590be2bef
+13 -2
View File
@@ -2,12 +2,18 @@ import { type ReactNode } from "react";
import {
closestCenter,
DndContext,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
type DragEndEvent,
} from "@dnd-kit/core";
import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import type { PanelLayout } from "../lib/panelLayout";
import PanelGroup from "./PanelGroup";
@@ -29,7 +35,12 @@ export default function PanelGroups({
setLayout: (l: PanelLayout) => void;
editing: boolean;
}) {
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
// The group grips are focusable and call themselves reorderable; without this only a pointer
// could actually move them (keyboard drag matched the other sortable lists).
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
);
const byId = new Map(items.map((it) => [it.id, it]));
const orderedAvailable = layout.order.filter((id) => byId.has(id));