#434

frontend/src/components/common/SortableItem.tsx

@@ -9,9 +9,9 @@ import type { ReactNode } from 'react'
 type Name = { text: string; language: string }
 
 
-const SortableItem = ({ id, name, fixed, children, moveGroup }: {
+const SortableItem = ({ id, name, fixed, children, moveGroup, handleId }: {
     id: string; name: Name; fixed?: boolean; children: ReactNode
-    moveGroup: (direction: number) => void },
+    moveGroup: (direction: number) => void; handleId: string },
 ) => {
   const motion = useClientMotion ()
   const item = useSortable ({ id, disabled: fixed,
@@ -25,15 +25,16 @@ const SortableItem = ({ id, name, fixed, children, moveGroup }: {
           item.isDragging && 'opacity-30 ring-2 ring-blue-500 dark:ring-blue-400')}>
     <div className="flex min-w-0 items-start gap-1 px-1">
       {fixed ? <span className="w-6 shrink-0"/> : <button type="button"
-          ref={item.setActivatorNodeRef} {...item.attributes} {...item.listeners}
+	  id={handleId} ref={item.setActivatorNodeRef} {...item.attributes} {...item.listeners}
           aria-label={name.text} lang={name.language}
-          aria-keyshortcuts="Space ArrowUp ArrowDown ArrowLeft ArrowRight Enter Escape"
+	  aria-keyshortcuts="Space ArrowUp ArrowDown Enter Escape Alt+ArrowLeft Alt+ArrowRight"
           className="mt-1 w-6 shrink-0 cursor-grab touch-none rounded
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
           active:cursor-grabbing dark:focus-visible:ring-blue-400"
           onClick={event => event.stopPropagation ()}
           onKeyDown={event => {
-            if (event.altKey && ['ArrowLeft', 'ArrowRight'].includes (event.key))
+	    if (event.altKey && !item.isDragging
+		&& ['ArrowLeft', 'ArrowRight'].includes (event.key))
             {
               event.preventDefault ()
               event.stopPropagation ()