Skip to content

fix(ui): Improve Floating UI usage#8328

Open
alexcarpenter wants to merge 7 commits intomainfrom
carp/floating-aria-cleanup
Open

fix(ui): Improve Floating UI usage#8328
alexcarpenter wants to merge 7 commits intomainfrom
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: d924118

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 7, 2026 3:17pm

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

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: 433aa213-c90f-4609-b447-70ac84374504

📥 Commits

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

📒 Files selected for processing (2)
  • packages/ui/src/elements/Select.tsx
  • packages/ui/src/elements/__tests__/Select.test.tsx

📝 Walkthrough

Walkthrough

Adds a Changeset and applies Floating UI and ARIA fixes across UI components: renames arialLabelariaLabel on MenuTrigger (type and usages), adds aria-haspopup to menu triggers, replaces an imperative floating(containerRef.current) call with useMergeRefs for the menu list container, and updates Select behavior to generate and expose stable trigger/listbox IDs, wire aria-expanded/aria-controls/aria-haspopup="listbox", mark options with role="option" and aria-selected, set the options container role="listbox", remove a manual left offset in SelectOptionList, and add tests verifying ARIA wiring.

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 'fix(ui): Improve Floating UI usage' clearly summarizes the main change—improving Floating UI usage with ARIA fixes across UI components.
Description check ✅ Passed The description is directly related to the changeset, providing a detailed bullet-point summary of all key fixes implemented in the PR.
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: d924118

Comment thread packages/ui/src/elements/Select.tsx Outdated
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.

2 participants