What?

Anchors the dnd-kit useSortable attributes next to its listeners on the same element inside DashboardGrid and DashboardLanes items, and wires setActivatorNodeRef so the keyboard sensor focuses the activator wrapper directly.

Adds regression tests for both surfaces under dashboard-grid/test/keyboard-activation.test.tsx and dashboard-lanes/test/keyboard-activation.test.tsx.

⚠️ Branched off from #78107
Part of #77626 #77616

Why?

Each tile used to split the sortable bindings across two nested elements: attributes (with tabIndex, role, aria-*) on the outer item, listeners (with onKeyDown) on an inner wrapper that also owned the grab cursor.

When the user tabbed to a tile, focus landed on the outer because of its tabIndex. Pressing Space fired keydown on the focused outer element.

React's synthetic events bubble up the ancestor chain from the target, never down to descendants, so the inner wrapper's onKeyDown listener never saw the event and the keyboard sensor's activation never fired. The Tab → Space → Arrow keys → Space drag, documented in packages/grid/README.md as supported, was broken in practice.

How?

Moves attributes to live on the same inner wrapper as listeners, restoring the dnd-kit pattern where focus and keydown handlers share a node.

The outer .item keeps setNodeRef so dnd-kit measures the correct bounds for collision detection; the inner wrapper takes setActivatorNodeRef so the keyboard sensor and screen reader attributes target the focusable element.

The original split existed so actionableArea buttons could render their own cursor (e.g. pointer) instead of inheriting the surface's grab. That goal is preserved: actionableArea still sits outside the cursor-bearing wrapper, so its children keep their native cursors.

Testing

Unit / structural

npm run test:unit -- packages/grid

The new keyboard-activation.test.tsx files render each surface in edit mode and assert that the dnd-kit activator (role="button", aria-roledescription="sortable") is nested inside the outer item, not on it. Reverting the fix flips the assertion: role="button" lands on the same node as the placement marker (data-lanes-key on lanes, the inline grid-column-end style on grid) and the tests fail.

Manual: before / after in Storybook

The base branch of this PR (update/dashboard-masonry-layout) has a Revert commit at HEAD that removes the fix, so checking out either branch flips between the two states without further setup.

1. From this branch, run npm run storybook:dev. Open the URL it prints.
2. Navigate to one of:
   • Grid > DashboardGrid > Customization (turn on editMode in Controls)
   • Grid > DashboardLanes > EditMode
3. Click once on the canvas so focus enters the iframe.
4. Tab until a tile is focused (you should see a focus ring).
5. Press Space. The tile should lift: the original becomes a dashed placeholder, and a clone follows the cursor in the drag overlay.
6. Use the arrow keys to move the clone between slots.
7. Space to drop, or Escape to cancel.

Before

After