fix(ActionRow): align DOM and visual order in stacked mode

.gitignore

@@ -20,3 +20,4 @@ www/public
 
 # Local Netlify folder
 .netlify
+.claude/

src/ActionRow/ActionRow.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ActionRow from '.';
+
+describe('<ActionRow />', () => {
+  describe('stacked mode', () => {
+    it('renders children in reverse DOM order so primary action leads focus', () => {
+      const { getAllByRole } = render(
+        <ActionRow isStacked>
+          <button type="button">Secondary</button>
+          <button type="button">Primary</button>
+        </ActionRow>,
+      );
+      const buttons = getAllByRole('button');
+      expect(buttons[0]).toHaveTextContent('Primary');
+      expect(buttons[1]).toHaveTextContent('Secondary');
+    });
+  });
+
+  describe('horizontal mode', () => {
+    it('renders children in original DOM order', () => {
+      const { getAllByRole } = render(
+        <ActionRow>
+          <button type="button">Secondary</button>
+          <button type="button">Primary</button>
+        </ActionRow>,
+      );
+      const buttons = getAllByRole('button');
+      expect(buttons[0]).toHaveTextContent('Secondary');
+      expect(buttons[1]).toHaveTextContent('Primary');
+    });
+  });
+});

src/ActionRow/README.md

@@ -16,7 +16,7 @@ notes: |
 A layout utility for the common use case of aligning buttons, links or text
 in a row in a control bar or nav.
 
-ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via `flex-direction: column-reverse;`).
+ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack — the component reverses the DOM order of children so that keyboard focus order matches the visual order (primary action is reached first).
 
 ## Basic Usage
 

src/ActionRow/_index.scss

@@ -17,15 +17,15 @@
   display: flex;
   flex-grow: 1;
   align-items: center;
-  flex-direction: column-reverse;
+  flex-direction: column;
   justify-content: center;
 
   & > * {
     margin: 0;
   }
 
   & > * + * {
-    margin-bottom: var(--pgn-spacing-action-row-gap-y);
+    margin-top: var(--pgn-spacing-action-row-gap-y);
   }
 }
 

src/ActionRow/index.tsx

@@ -18,6 +18,12 @@ function ActionRow({
   children,
   ...props
 }: ActionRowProps) {
+  // Reverse DOM order when stacked so the primary action (last child) is first
+  // in the tab sequence, matching its visual position at the top of the stack.
+  const orderedChildren = isStacked
+    ? React.Children.toArray(children).reverse()
+    : children;
+
   return React.createElement(
     as,
     {
@@ -27,7 +33,7 @@ function ActionRow({
         'pgn__action-row-stacked': isStacked,
       }),
     },
-    children,
+    orderedChildren,
   );
 }