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

Summary by CodeRabbit

Release Notes

New Features
- Menu trigger now supports keyboard activation with Enter/Space keys.
- Menu navigation with Arrow keys (Up/Down/Home/End), automatically skipping disabled items.
- Menu closes with Escape key, restoring focus to the trigger.
- Popover component now includes configurable focus-trapping behavior via new modal prop.
Bug Fixes
- Menu no longer applies aria-hidden to surrounding page content, improving assistive technology access.
Tests
- Added comprehensive keyboard and accessibility test coverage for Menu component.

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

🦋 Changeset detected

Latest commit: 8d4b8cc

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	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	Jun 18, 2026 12:32pm
swingset	Ready	Preview, Comment	Jun 18, 2026 12:32pm

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), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 95c123bf-6647-4f7a-80f5-427ae2c10b83

📥 Commits

Reviewing files that changed from the base of the PR and between ab8f5aa and b29716c.

📒 Files selected for processing (1)

.changeset/menu-keyboard-a11y.md

✅ Files skipped from review due to trivial changes (1)

.changeset/menu-keyboard-a11y.md

📝 Walkthrough

Walkthrough

The PR documents Menu keyboard accessibility enhancements and focus management changes in a changeset entry. The changeset records support for trigger activation via Enter/Space keys, in-menu navigation using arrow keys and Home/End, and Escape to close while restoring focus to the trigger. It also notes that disabled items are skipped during navigation, and that page-wide aria-hidden is no longer applied while a menu is open.

Changes

Menu keyboard and a11y updates

Layer / File(s)	Summary
Menu keyboard and a11y changeset `.changeset/menu-keyboard-a11y.md`	Patch-level changeset entry for `@clerk/ui` documenting trigger keyboard activation (Enter/Space), in-menu navigation (arrow keys, Home, End with disabled-item skipping), menu close via Escape with focus return, and removal of page-wide aria-hidden behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

LauraBeatris
Ephem

Poem

🐰 With arrow keys and Enter's call,
The menu springs and heeds them all,
Escape brings focus back to place,
No aria-hidden hides the space!
Accessibility takes the stage. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'refactor(ui): Menu interaction and accessibility improvements' accurately and clearly summarizes the main changes in the PR—enhancing Menu keyboard navigation and accessibility with Floating UI.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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/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/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 8d4b8cc

wobsoriano

sweet!

github-actions · 2026-06-17T18:44:43Z

API Changes Report

Generated by Break Check on 2026-06-18T12:34:42.809Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

_{Last ran on 8d4b8cc.}

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

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

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

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

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

alexcarpenter force-pushed the carp/menu-interaction-improvements branch from b643f14 to ab8f5aa Compare May 19, 2026 01:19

vercel Bot deployed to Preview May 19, 2026 01:20 View deployment

alexcarpenter requested a review from wobsoriano June 5, 2026 17:48

wobsoriano approved these changes Jun 8, 2026

View reviewed changes

alexcarpenter added 4 commits June 17, 2026 14:39

refactor(ui): Menu interaction and accessibility improvements

b7bbb60

fix tests

8fc7015

Create menu-keyboard-a11y.md

9fdec33

add disabled test case

b29716c

alexcarpenter force-pushed the carp/menu-interaction-improvements branch from ab8f5aa to b29716c Compare June 17, 2026 18:41

vercel Bot deployed to Preview – clerk-js-sandbox June 17, 2026 18:42 View deployment

vercel Bot deployed to Preview – swingset June 17, 2026 18:43 View deployment

Merge branch 'main' into carp/menu-interaction-improvements

8d4b8cc

vercel Bot deployed to Preview – clerk-js-sandbox June 18, 2026 12:31 View deployment

vercel Bot deployed to Preview – swingset June 18, 2026 12:32 View deployment

alexcarpenter merged commit 57a58ac into main Jun 18, 2026
47 checks passed

alexcarpenter deleted the carp/menu-interaction-improvements branch June 18, 2026 14:21

clerk-cookie mentioned this pull request Jun 18, 2026

ci(repo): Version packages #8914

Merged

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 merged 5 commits into
mainfrom
carp/menu-interaction-improvements

alexcarpenter commented Apr 16, 2026 •

edited by coderabbitai Bot

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

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

wobsoriano left a comment

Uh oh!

github-actions Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Release Notes

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

Changes

Estimated code review effort

Suggested reviewers

Poem

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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wobsoriano left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

API Changes Report

Summary

No API Changes Detected

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexcarpenter commented Apr 16, 2026 •

edited by coderabbitai Bot

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

pkg-pr-new Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Jun 17, 2026 •

edited

Loading