refactor(ui): Migrate to focus-visibile usage by alexcarpenter · Pull Request #8595 · clerk/javascript

alexcarpenter · 2026-05-19T15:29:43Z

Description

Migrate :focus to :focus-visible across packages/ui so focus rings only appear during keyboard navigation, not mouse clicks.

BEFORE

focus-before.mov

AFTER

focus-after.mov

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-05-19T15:29:48Z

🦋 Changeset detected

Latest commit: 4fbca13

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	Minor
@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-05-19T15:29:49Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 19, 2026 4:25pm

coderabbitai · 2026-05-19T15:34:15Z

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: ee3a0563-d4dc-473c-9a43-70c67d4863bb

📥 Commits

Reviewing files that changed from the base of the PR and between de65da4 and 4fbca13.

📒 Files selected for processing (1)

.changeset/migrate-focus-visible.md

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

.changeset/migrate-focus-visible.md

📝 Walkthrough

Walkthrough

This pull request systematically replaces :focus pseudo-class selectors with :focus-visible across the UI component library to improve keyboard accessibility. The change distinguishes between keyboard-driven focus (visible) and programmatic/mouse-driven focus (no ring). The migration starts in the shared styled system (borderVariants and focusRing helpers), cascades through the base theme and NeoBrutalism variant, updates primitive Button and Link components across all variants, and finally applies the change to higher-level elements like ArrowBlockButton, InputGroup, Navbar, PhoneInput, and Tabs.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: migrating CSS focus selectors from `:focus` to `:focus-visible` across the UI package.
Description check	✅ Passed	The description clearly explains the purpose of the migration (focus rings appear only during keyboard navigation) and provides before/after visual demonstrations.
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: 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/customizables/classGeneration.ts`:
- Around line 129-141: normalizeFocusSelectors currently duplicates :focus rules
as :focus-visible but leaves the original :focus keys, so the migration doesn't
disable :focus styles; update normalizeFocusSelectors to replace the :focus key
with the :focus-visible key (remove the original :focus entry) when no existing
:focus-visible key exists, ensuring you still clone the input only when needed
(result = result === val ? { ...val } : result) and preserving values via
result[newKey] = val[key] and then delete result[key]; keep logic that skips
keys already containing :focus-visible or :focus-within to avoid accidental
changes.

🪄 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: dd664e7f-1dbd-4051-bb4a-7caa7eee7e3f

📥 Commits

Reviewing files that changed from the base of the PR and between 75e5d25 and e4b5e80.

📒 Files selected for processing (11)

packages/ui/src/baseTheme.ts
packages/ui/src/customizables/classGeneration.ts
packages/ui/src/elements/ArrowBlockButton.tsx
packages/ui/src/elements/InputGroup.tsx
packages/ui/src/elements/Navbar.tsx
packages/ui/src/elements/PhoneInput/index.tsx
packages/ui/src/elements/Tabs.tsx
packages/ui/src/primitives/Button.tsx
packages/ui/src/primitives/Link.tsx
packages/ui/src/styledSystem/common.ts
packages/ui/src/themes/neobrutalism.ts

pkg-pr-new · 2026-05-19T16:49:35Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 4fbca13

refactor(ui): Migrate to focus-visibile usage

e4b5e80

github-actions Bot added the ui label May 19, 2026

vercel Bot deployed to Preview May 19, 2026 15:30 View deployment

alexcarpenter commented May 19, 2026

View reviewed changes

Comment thread packages/ui/src/customizables/classGeneration.ts Outdated

coderabbitai Bot reviewed May 19, 2026

View reviewed changes

Comment thread packages/ui/src/customizables/classGeneration.ts Outdated

add fallback and remove normalization

de65da4

vercel Bot deployed to Preview May 19, 2026 16:17 View deployment

add changeset

4fbca13

vercel Bot deployed to Preview May 19, 2026 16:25 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(ui): Migrate to focus-visibile usage#8595

refactor(ui): Migrate to focus-visibile usage#8595
alexcarpenter wants to merge 3 commits into
mainfrom
carp/migrate-to-focus-visible

alexcarpenter commented May 19, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented May 19, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 19, 2026 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai Bot commented May 19, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

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

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot commented May 19, 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!

pkg-pr-new Bot commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

alexcarpenter commented May 19, 2026 •

edited

Loading

changeset-bot Bot commented May 19, 2026 •

edited

Loading

vercel Bot commented May 19, 2026 •

edited

Loading

coderabbitai Bot commented May 19, 2026 •

edited

Loading