PxTools · KentMossback · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026
@@ -22,6 +22,7 @@ export * from './lib/components/Link/Link';
 export * from './lib/components/LinkCard/LinkCard';
 export * from './lib/components/List';
 export * from './lib/components/LocalAlert/LocalAlert';
+export * from './lib/components/Modal/Modal';
 export * from './lib/components/Notes/MandatoryNotes';
 export * from './lib/components/Notes/MandatoryTableNotes';
 export * from './lib/components/Notes/MandatoryVariableNotes';

@@ -144,7 +144,7 @@ describe('Modal', () => {
     expect(screen.getByText('Test Heading')).toBeDefined();
   });
 
-  it('should handle Enter key press on buttons', () => {
+  it('should not close on button keyup Enter alone', () => {
     const onCloseMock = vi.fn();
 
     render(
@@ -157,7 +157,19 @@ describe('Modal', () => {
 
     fireEvent.keyUp(confirmButton, { key: 'Enter' });
 
-    expect(onCloseMock).toHaveBeenCalledWith(true, 'Enter');
+    expect(onCloseMock).not.toHaveBeenCalled();
+  });
+
+  it('should focus modal body when opened', () => {
+    const { container } = render(
+      <Modal isOpen={true}>
+        <span>test</span>
+      </Modal>,
+    );
+
+    const body = container.querySelector('div[class*="body"]');
+
+    expect(body).toBe(document.activeElement);
   });
 
   it('should update body overflow style when opening and closing', () => {

@@ -1,13 +1,6 @@
 import cl from 'clsx';
 import { useTranslation } from 'react-i18next';
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent,
-} from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import classes from './Modal.module.scss';
 import Label from '../Typography/Label/Label';
@@ -39,6 +32,7 @@ export function Modal({
   const cssClasses = className.length > 0 ? ' ' + className : '';
   const [isModalOpen, setIsModalOpen] = useState(isOpen);
   const modalRef = useRef<HTMLDialogElement | null>(null);
+  const bodyRef = useRef<HTMLDivElement | null>(null);
   let cancelLabelValue = cancelLabel;
   let confirmLabelValue = confirmLabel;
 
@@ -59,6 +53,7 @@ export function Modal({
       if (isModalOpen) {
         modalElement.showModal();
         setWindowScroll(false);
+        bodyRef.current?.focus();
       } else {
         modalElement.close();
         setWindowScroll(true);
@@ -74,33 +69,15 @@ export function Modal({
   };
 
   const handleCloseModal = useCallback(
-    (updated: boolean, event?: ReactKeyboardEvent | MouseEvent) => {
-      const handleKeyboardEvent = (
-        updated: boolean,
-        event: ReactKeyboardEvent,
-      ) => {
-        const keyPress = event.key;
-        const isValidKeyPress =
-          keyPress === 'Enter' || keyPress === ' ' || keyPress === 'Escape';
-
-        if (onClose && isValidKeyPress) {
-          setWindowScroll(true);
+    (updated: boolean, keyPress?: ' ' | 'Enter' | 'Escape') => {
+      if (onClose) {
+        setWindowScroll(true);
+        if (keyPress) {
           onClose(updated, keyPress);
-          setIsModalOpen(false);
-        }
-      };
-
-      const handleMouseEvent = (updated: boolean) => {
-        if (onClose) {
-          setWindowScroll(true);
+        } else {
           onClose(updated);
-          setIsModalOpen(false);
         }
-      };
-      if (event) {
-        handleKeyboardEvent(updated, event as ReactKeyboardEvent);
-      } else {
-        handleMouseEvent(updated);
+        setIsModalOpen(false);
       }
     },
     [onClose],
@@ -110,11 +87,7 @@ export function Modal({
     // Handle the Escape key to close the modal
     const handleKeyDownInModal = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        // 'as unknown as ReactKeyboardEvent' is a hack to avoid the type error when passing the event to the function
-        handleCloseModal(false, event as unknown as ReactKeyboardEvent);
-      }
-      if (event.key === 'Enter') {
-        event.preventDefault(); // Prevent the default behavior of the Enter key on buttons (turns it into a mouse click event)
+        handleCloseModal(false, 'Escape');
       }
     };
 
@@ -149,14 +122,13 @@ export function Modal({
               icon="XMark"
               type="button"
               onClick={() => handleCloseModal(false)}
-              onKeyUp={(event) => handleCloseModal(false, event)}
               aria-label={cancelLabelValue}
             ></Button>
           </div>
         </div>
       </div>
       {/* tabIndex to fix the div being focusable for some reason */}
-      <div className={cl(classes.body)} tabIndex={-1}>
+      <div ref={bodyRef} className={cl(classes.body)} tabIndex={-1}>
         {children}
       </div>
       <div className={cl(classes.footer)}>
@@ -166,7 +138,6 @@ export function Modal({
             size="medium"
             type="button"
             onClick={() => handleCloseModal(true)}
-            onKeyUp={(event) => handleCloseModal(true, event)}
             aria-label={confirmLabelValue}
           >
             {confirmLabelValue}
@@ -176,7 +147,6 @@ export function Modal({
             size="medium"
             type="button"
             onClick={() => handleCloseModal(false)}
-            onKeyUp={(event) => handleCloseModal(false, event)}
             aria-label={cancelLabelValue}
           >
             {cancelLabelValue}

@@ -143,7 +143,15 @@
           },
           "rearrange": {
             "title": "إعادة ترتيب الجدول",
-            "description": "نص الوصف..."
+            "description": "نص الوصف...",
+            "rearrange_modal": {
+              "cancel_button": "يلغي",
+              "confirm_button": "يحفظ",
+              "description": "اسحب وأفلت المتغيرات لإعادة ترتيب تخطيط الجدول",
+              "title": "إعادة ترتيب الجدول",
+              "stub_variable_header": "متغيرات الستوب",
+              "heading_variable_header": "متغيرات العنوان"
+            }
           },
           "change_order": {
             "title": "تغيير الترتيب",

@@ -200,7 +200,15 @@
           },
           "rearrange": {
             "title": "Rearrange table",
-            "description": "Description text..."
+            "description": "Description text...",
+            "rearrange_modal": {
+              "cancel_button": "Cancel",
+              "confirm_button": "Confirm",
+              "description": "Drag and drop the variables to rearrange the table layout",
+              "title": "Rearrange table",
+              "stub_variable_header": "Stub variables",
+              "heading_variable_header": "Heading variables"
+            }
           },
           "change_order": {
             "title": "Change order",

@@ -200,7 +200,15 @@
           },
           "rearrange": {
             "title": "Omorganiser tabell",
-            "description": "Beskrivelsestekst..."
+            "description": "Beskrivelsestekst...",
+            "rearrange_modal": {
+              "cancel_button": "Avbryt",
+              "confirm_button": "Bekreft",
+              "description": "Dra og slipp variablene for å endre tabelloppsettet",
+              "title": "Tilpass tabell",
+              "stub_variable_header": "Rader",
+              "heading_variable_header": "Kolonner"
+            }
           },
           "change_order": {
             "title": "Endre rekkefølge",

@@ -200,7 +200,15 @@
           },
           "rearrange": {
             "title": "Anpassa tabell",
-            "description": "Beskrivande text..."
+            "description": "Beskrivande text...",
+            "rearrange_modal": {
+                "cancel_button": "Avbryt",
+                "confirm_button": "Bekräfta",
+                "description": "Dra och släpp variablerna för att ändra tabellens layout",
+                "title": "Anpassa tabell",
+                "stub_variable_header": "Rader",
+                "heading_variable_header": "Kolumner"
+            }
           },
           "change_order": {
             "title": "Ändra ordning",

@@ -211,6 +211,14 @@ interface Resources {
             rearrange: {
               description: 'Description text...';
               title: 'Rearrange table';
+              rearrange_modal: {
+                cancel_button: 'Cancel';
+                confirm_button: 'Confirm';
+                description: 'Drag and drop the variables to rearrange the table layout';
+                title: 'Rearrange table';
+                stub_variable_header: 'Stub variables';
+                heading_variable_header: 'Header variables';
+              };
             };
             title: 'Customise';
           };

@@ -0,0 +1,93 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  gap: 12px;
+}
+
+.groupColumn {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.groupZone {
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--px-color-border-subtle);
+  border-radius: var(--px-border-radius-medium);
+  padding: 8px;
+  min-height: 220px;
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+.dropPlaceholder {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: var(--drop-preview-height, 40px);
+  border: 1px dashed var(--px-color-border-focus-outline);
+  border-radius: var(--px-border-radius-small);
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  background: color-mix(
+    in srgb,
+    var(--px-color-background-subtle) 88%,
+    transparent
+  );
+  pointer-events: none;
+}
+
+.dropPlaceholderLabel {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.listItem {
+  position: relative;
+  z-index: 1;
+  border: 1px solid var(--px-color-border-subtle);
+  border-radius: var(--px-border-radius-small);
+  background: var(--px-color-surface-default);
+  padding: 8px 10px;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  transition: box-shadow 120ms ease;
+}
+
+.listItem:active {
+  cursor: grabbing;
+}
+
+.listItem:focus-visible {
+  outline: 2px solid var(--px-color-border-focus-outline);
+  outline-offset: 1px;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}