refactor(ui): Menu interaction and accessibility improvements by alexcarpenter · Pull Request #8333 · clerk/javascript

alexcarpenter · 2026-04-16T13:59:30Z

Description

Improve Menu keyboard navigation and accessibility. Menus now support Enter/Space to open from the trigger, ArrowDown/ArrowUp/Home/End to move focus, Escape to close and return focus to the trigger, and skip disabled items during arrow-key navigation. Menus no longer mark the rest of the page as aria-hidden while open, so assistive technologies can still reach surrounding content.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2026-04-16T13:59:34Z

🦋 Changeset detected

Latest commit: b643f14

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-04-16T13:59:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Apr 16, 2026 3:47pm

coderabbitai · 2026-04-16T15:31:19Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 03a80c73-e164-435a-aeca-19b840cc4127

📥 Commits

Reviewing files that changed from the base of the PR and between cf5437f and b643f14.

📒 Files selected for processing (1)

packages/ui/src/elements/__tests__/Menu.test.tsx

📝 Walkthrough

Walkthrough

The PR refactors Menu to provide Floating UI interaction handlers (getReferenceProps, getFloatingProps, getItemProps), activeIndex, and elementsRef; replaces custom trigger/toggle and keyboard logic with Floating UI utilities (FloatingList, useListItem, useMergeRefs); and changes MenuTrigger prop arialLabel → ariaLabel. Popover gains an optional modal?: boolean prop passed to FloatingFocusManager. Tests: added a comprehensive Menu test suite and an animations-disabled test wrapper for ConnectedAccountsSection. A changeset documents Menu accessibility updates and removal of page-wide aria-hidden while a menu is open.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: refactoring the Menu component to improve keyboard navigation (Enter/Space, ArrowDown/ArrowUp, Escape) and accessibility (aria-hidden removal).
Description check	✅ Passed	The description directly relates to the changeset, detailing the specific accessibility and keyboard navigation improvements implemented across Menu components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/elements/Menu.tsx`:
- Around line 96-103: The prop rename from arialLabel to ariaLabel in
MenuTrigger/MenuTriggerProps is a breaking change; restore backward
compatibility by accepting both names: update MenuTriggerProps to allow
ariaLabel?: string | ((open: boolean) => string) and a deprecated arialLabel?:
string | ((open: boolean) => string), then in MenuTrigger compute the effective
label by preferring ariaLabel when present and falling back to arialLabel (e.g.,
derive normalizedAriaLabel from ariaLabel if defined, otherwise arialLabel), and
document/mark arialLabel as deprecated so consumers have a compatibility window;
ensure getReferenceProps/usage uses the normalized value.
- Around line 65-71: Add a regression test that renders the Menu component using
the same composition that wires useListNavigation and SimpleButton (i.e., Menu
with three items where the middle item has isDisabled) and assert keyboard arrow
navigation skips the disabled item: simulate focus on the first item, send
ArrowDown (and ArrowUp) key events, and verify focus moves from the first item
directly to the third item (and vice versa) rather than landing on the disabled
SimpleButton; reference the Menu component, useListNavigation, SimpleButton and
the isDisabled prop when locating code to test.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 9e51c4b4-043b-46d4-8292-2788f995a779

📥 Commits

Reviewing files that changed from the base of the PR and between 45b773a and cf5437f.

📒 Files selected for processing (6)

.changeset/menu-keyboard-a11y.md
packages/ui/src/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx
packages/ui/src/elements/Menu.tsx
packages/ui/src/elements/Popover.tsx
packages/ui/src/elements/ThreeDotsMenu.tsx
packages/ui/src/elements/__tests__/Menu.test.tsx

pkg-pr-new · 2026-04-16T15:49:38Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@8333

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8333

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8333

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8333

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8333

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8333

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8333

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8333

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8333

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8333

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8333

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8333

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8333

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8333

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8333

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8333

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8333

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8333

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8333

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8333

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8333

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8333

commit: b643f14

refactor(ui): Menu interaction and accessibility improvements

71d7bff

github-actions bot added the ui label Apr 16, 2026

vercel bot deployed to Preview April 16, 2026 14:00 View deployment

fix tests

566073c

vercel bot deployed to Preview April 16, 2026 15:14 View deployment

Create menu-keyboard-a11y.md

cf5437f

vercel bot deployed to Preview April 16, 2026 15:21 View deployment

alexcarpenter marked this pull request as ready for review April 16, 2026 15:23

coderabbitai bot reviewed Apr 16, 2026

View reviewed changes

Comment thread packages/ui/src/elements/Menu.tsx

Comment thread packages/ui/src/elements/Menu.tsx

add disabled test case

b643f14

vercel bot deployed to Preview April 16, 2026 15:47 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(ui): Menu interaction and accessibility improvements#8333

refactor(ui): Menu interaction and accessibility improvements#8333
alexcarpenter wants to merge 4 commits intomainfrom
carp/menu-interaction-improvements

alexcarpenter commented Apr 16, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

vercel bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Apr 16, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new bot commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

alexcarpenter commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new bot commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

alexcarpenter commented Apr 16, 2026 •

edited

Loading

changeset-bot bot commented Apr 16, 2026 •

edited

Loading

vercel bot commented Apr 16, 2026 •

edited

Loading

coderabbitai bot commented Apr 16, 2026 •

edited

Loading