Skip to content

fix(ui): Improve Floating UI usage#8328

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

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

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 Apr 16, 2026 7:33pm

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: 6478ac44-4880-4ea6-aa57-a791ed0fc054

📥 Commits

Reviewing files that changed from the base of the PR and between 4508f61 and da6d7d9.

📒 Files selected for processing (1)
  • packages/ui/src/elements/Select.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/ui/src/elements/Select.tsx

📝 Walkthrough

Walkthrough

This pull request adds a Changesets entry and applies accessibility and Floating UI fixes across UI components: renames arialLabel to ariaLabel on MenuTrigger (type and usages), adds aria-haspopup to menu trigger and aria-expanded to menu/select triggers, adds missing ARIA attributes (role, aria-selected) to select options and role="listbox" to the options container, removes a manual left-position offset from SelectOptionList, and replaces an imperative floating ref invocation with a merged ref via useMergeRefs for the menu list.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main changes: improvements to Floating UI usage and ARIA accessibility attributes.
Description check ✅ Passed The description is directly related to the changeset, providing a bullet-point breakdown of the specific fixes across Menu and Select 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.

@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: da6d7d9

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