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:
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user