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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

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: cd0f1f3

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	Minor
@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-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	Jun 23, 2026 4:02pm
swingset	Ready	Preview, Comment	Jun 23, 2026 4:02pm

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

github-actions · 2026-06-05T18:05:38Z

Break Check: no API changes detected across the tracked packages.

_{Last ran on a846d4a. Pushes that change no tracked declarations (no API surface change vs. base) are skipped and don't update this comment.}

maxyinger

nice

github-actions · 2026-06-23T14:40:40Z

API Changes Report

Generated by Break Check on 2026-06-23T16:03:55.340Z

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 cd0f1f3.}

refactor(ui): Migrate to focus-visibile usage
e4b5e80

github-actionsBot added the ui label May 19, 2026

vercelBotdeployed to Preview May 19, 2026 15:30 View deployment

alexcarpenter commented May 19, 2026
View reviewed changes

Comment threadpackages/ui/src/customizables/classGeneration.ts Outdated

coderabbitaiBot reviewed May 19, 2026
View reviewed changes

Comment threadpackages/ui/src/customizables/classGeneration.ts Outdated

add fallback and remove normalization
de65da4

vercelBotdeployed to Preview May 19, 2026 16:17 View deployment

add changeset
4fbca13

vercelBotdeployed to Preview May 19, 2026 16:25 View deployment

wobsoriano approved these changes May 28, 2026
View reviewed changes

Merge branch 'main' into carp/migrate-to-focus-visible
a846d4a

vercelBotdeployed to Preview June 5, 2026 18:03 View deployment

alexcarpenter requested a review from a teamJune 18, 2026 19:25

gogocharli approved these changes Jun 18, 2026
View reviewed changes

maxyinger approved these changes Jun 18, 2026
View reviewed changes

fix usages
f4efe77

vercelBothad a problem deploying to Preview – swingset June 23, 2026 14:33 Failure

vercelBotdeployed to Preview – clerk-js-sandbox June 23, 2026 14:33 View deployment

Merge branch 'main' into carp/migrate-to-focus-visible
cd0f1f3

vercelBotdeployed to Preview – clerk-js-sandbox June 23, 2026 16:02 View deployment

vercelBotdeployed to Preview – swingset June 23, 2026 16:02 View deployment

alexcarpenter merged commit 3ba456b into mainJun 23, 2026
48 checks passed

alexcarpenter deleted the carp/migrate-to-focus-visible branch June 23, 2026 16:28

clerk-cookie mentioned this pull request Jun 23, 2026
ci(repo): Version packages #8939
Merged

coderabbitaiBot mentioned this pull request Jun 25, 2026
fix(ui): Ensure tab focus ring is visible for keyboard interactions #8998
Merged
9 tasks