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 {
|
import {
|
||||||
closestCenter,
|
closestCenter,
|
||||||
DndContext,
|
DndContext,
|
||||||
|
KeyboardSensor,
|
||||||
PointerSensor,
|
PointerSensor,
|
||||||
useSensor,
|
useSensor,
|
||||||
useSensors,
|
useSensors,
|
||||||
type DragEndEvent,
|
type DragEndEvent,
|
||||||
} from "@dnd-kit/core";
|
} 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 type { PanelLayout } from "../lib/panelLayout";
|
||||||
import PanelGroup from "./PanelGroup";
|
import PanelGroup from "./PanelGroup";
|
||||||
|
|
||||||
@@ -29,7 +35,12 @@ export default function PanelGroups({
|
|||||||
setLayout: (l: PanelLayout) => void;
|
setLayout: (l: PanelLayout) => void;
|
||||||
editing: boolean;
|
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 byId = new Map(items.map((it) => [it.id, it]));
|
||||||
|
|
||||||
const orderedAvailable = layout.order.filter((id) => byId.has(id));
|
const orderedAvailable = layout.order.filter((id) => byId.has(id));
|
||||||
|
|||||||
Reference in New Issue
Block a user