Radix UI · Menu button

The exact mount the score was measured on. Scored result.

Tabreach the trigger↓should open with the first item activeEntershould open with the first item active↓ / ↑should move between itemsEscshould close and return focus to the trigger

The mount, liveclick in once, then keyboard

What the DOM saysmount source on GitHub

Live DOM readout for the Menu button mount.
Reading	Now	APG expects
trigger aria-haspopup	…	"menu"
trigger aria-expanded	…	"false", then "true" while open
menu visible	…	opens on click, Enter, Down Arrow
active item	…	DOM focus on an item, or aria-activedescendant
document.activeElement	…	a menu item while the menu is open

Measured on @radix-ui/react-dropdown-menu@2.1.19.

The same mount source, editable, with Radix UI resolved at the exact scored version. Example styling ships as polish.css; delete its import for the bare mount. Runs on CodeSandbox's bundler; the measurement belongs to the untouched mount.

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { TEXT } from "./harness-kit";

/**
 * Radix UI dropdown menu, mounted exactly as the Radix documentation describes.
 *
 * Radix forwards props to the underlying elements, so the test ids go on
 * directly and no stamping is needed. Nothing here manages focus, adds ARIA, or
 * handles keys.
 */
export function MenuHarness() {
  return (
    <>
      <button data-testid="hr-before" type="button">
        Before
      </button>

      <DropdownMenu.Root>
        <DropdownMenu.Trigger data-testid="hr-trigger">{TEXT.menuTrigger}</DropdownMenu.Trigger>
        <DropdownMenu.Portal>
          <DropdownMenu.Content data-testid="hr-menu">
            <DropdownMenu.Item data-testid="hr-item-1">{TEXT.menuItem1}</DropdownMenu.Item>
            <DropdownMenu.Item data-testid="hr-item-2">{TEXT.menuItem2}</DropdownMenu.Item>
            <DropdownMenu.Item data-testid="hr-item-3">{TEXT.menuItem3}</DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>

      <button data-testid="hr-after" type="button">
        After
      </button>
    </>
  );
}

Open Sandbox

Self-run companion check, approximated in-browser from ARIA attributes and visibility. Official scores are measured by the runner with replayable Playwright traces.