Skip to content

fix(ui): Improve Floating UI usage#8328

Merged
jacekradko merged 12 commits into
mainfrom
carp/floating-aria-cleanup
May 18, 2026
Merged

fix(ui): Improve Floating UI usage#8328
jacekradko merged 12 commits into
mainfrom
carp/floating-aria-cleanup

Conversation

@alexcarpenter
Copy link
Copy Markdown
Member

@alexcarpenter alexcarpenter commented Apr 16, 2026

Description

Improve Floating UI usage:

  • fix arialLabel typo in MenuTrigger
  • replace imperative floating ref in MenuList with useMergeRefs
  • remove manual position offset in SelectOptionList
  • add aria-haspopup to MenuTrigger
  • add missing ARIA attributes (aria-expanded, aria-haspopup, role, aria-selected) to Select components.

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 16, 2026

🦋 Changeset detected

Latest commit: 39a5e38

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
Copy link
Copy Markdown

vercel Bot commented Apr 16, 2026

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

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment May 18, 2026 3:10pm

Request Review

@alexcarpenter alexcarpenter changed the title fix(ui): Floating UI and aria usage fix(ui): Improve Floating UI usage Apr 16, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 16, 2026

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a Changeset and applies Floating UI and ARIA fixes across UI components: Select now generates stable trigger/listbox IDs and exposes them through state, options gain role="option" and aria-selected, the options container uses role="listbox" and accepts explicit id/label attributes, Floating UI positioning styles are applied directly, the trigger button sets aria-expanded, aria-controls and aria-haspopup="listbox", tests verify ARIA wiring, and usePopover.adjustToReferenceWidth now accepts a numeric pixel adjustment.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: improvements to Floating UI usage and ARIA handling across menu and select components, matching the core objectives of the changeset.
Description check ✅ Passed The description is directly related to the changeset, listing the specific fixes implemented: arialLabel typo, MenuList ref refactoring, SelectOptionList offset removal, and ARIA attribute additions.
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.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 16, 2026

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 39a5e38

Comment thread packages/ui/src/elements/Select.tsx Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/hooks/usePopover.ts`:
- Around line 63-66: The current truthy check skips width syncing when
adjustToReferenceWidth is 0; change the conditional in usePopover.ts to
explicitly allow numeric 0 by checking for typeof adjustToReferenceWidth ===
'number' or adjustToReferenceWidth === true, then compute extra as before and
set elements.floating.style.width using elements.reference.offsetWidth (or '' if
no reference); update the if condition that currently reads if
(adjustToReferenceWidth) to use this explicit check so numeric zero still
triggers width adjustment for elements.floating based on elements.reference.
🪄 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: 7318b985-c988-4a57-8e06-3dcbe2ff4574

📥 Commits

Reviewing files that changed from the base of the PR and between d924118 and b59cc95.

📒 Files selected for processing (2)
  • packages/ui/src/elements/Select.tsx
  • packages/ui/src/hooks/usePopover.ts

Comment thread packages/ui/src/hooks/usePopover.ts Outdated
@jacekradko jacekradko merged commit 62d4cec into main May 18, 2026
43 checks passed
@jacekradko jacekradko deleted the carp/floating-aria-cleanup branch May 18, 2026 15:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants